Css In Depth: Part 2 Mastering Layout

楷鹏 : )

已于 2022-09-15 22:51:24 修改

阅读量137

点赞数

文章标签： css 前端 html

于 2022-09-05 23:54:10 首次发布

本文链接：https://blog.csdn.net/YopenLang/article/details/125302691

版权

4 Making sense of floats

4.1 The purpose of floats

5 Flexbox

5.1 Flexbox principles

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <header></header>
      <nav>
        <ul class="site-nav">
          <li><a href="/">Home</a></li>
          <li><a href="/features">Features</a></li>
          <li><a href="/pricing">Pricing</a></li>
          <li><a href="/support">Support</a></li>
          <li class="nav-right"><a href="/about">About</a></li>
        </ul>
      </nav>

      <main class="flex">
        <div class="column-main tile">
          <h1>Team collaboration done right</h1>
          <p>
            Thousands of teams from all over the world turn to <b>Ink</b>
            to communicate and get things done.
          </p>
        </div>

        <div class="column-sidebar">
          <div class="tile">
            <form class="login-form">
              <h3>Login</h3>
              <p>
                <label for="username">Username</label>
                <input id="username" type="text" name="username" />
              </p>
              <p>
                <label for="password">Password</label>
                <input id="password" type="password" name="password" />
              </p>
              <button type="submit">Login</button>
            </form>
          </div>
        </div>
        <div class="tile centered">
          <small>Starting at</small>
          <div class="cost">
            <span class="cost-currency">$</span>
            <span class="cost-dollars">20</span>
            <span class="cost-cents">.00</span>
          </div>
          <a class="cta-button" href="/pricing">Sign up</a>
        </div>
      </main>
    </div>
  </body>
</html>

<style>
  :root {
    box-sizing: border-box;
  }

  *,
  ::before,
  ::after {
    box-sizing: inherit;
  }

  body {
    background-color: #709b90;
    font-family: Helvetica, Arial, sans-serif;
  }

  body * + * {
    margin-top: 1.5em;
  }

  .container {
    max-width: 1080px;
    margin: 0 auto;
  }
</style>

5.1.1 Building a basic flexbox menu

Our goal:
Figure 5.3 Navigational menu with items laid out using flexbox

First step:
Figure 5.4 Menu with flexbox and colors applied

 <ul class="site-nav">
   <li><a href="/">Home</a></li>
   <li><a href="/features">Features</a></li>
   <li><a href="/pricing">Pricing</a></li>
   <li><a href="/support">Support</a></li>
   <li class="nav-right"><a href="/about">About</a></li>
 </ul>

.site-nav {
  display: flex;
  padding-left: 0;
  list-style-type: none;
  background-color: #5f4b44;
}

.site-nav > li {
  margin-top: 0;
}

.site-nav > li > a {
  background-color: #cc6b5a;
  color: white;
  text-decoration: none;
}

5.1.2 Adding padding and spacing

Figure 5.5 Menu with padding and link styles added

.site-nav > li {
  margin-top: 0;
}

.site-nav > li > a {
  display: block; /* Makes links block level so they add to the parent element's height */
  padding: .5em 1em; /* Adds padding inside the links */
  background-color: #cc6b5a;
  color: white;
  text-decoration: none;
}

Figure 5.6 Margins apply spacing between flex items

.site-nav > li + li {
  margin-left: 1.5em; /* Targets every list item that follows another list item(that is, all but the first) */
}

.site-nav > .nav-right {
  margin-left: auto; /* Auto margins inside a flexbox will fill the available space. */
}

5.2 Flex item sizes

Figure 5.7 Main area with a flex layout applied

/* Adds a background color and padding to the three tiles. */
.tile {
 padding: 1.5em;
 background-color: #fff;
}

/* Applies a flexbox layout to the main container. */
.flex {
 display: flex;
}

/* Remove the top margin and applies space between the flex items. */
.flex > * + * {
 margin-top: 0;
 margin-left: 1.5em;
}

Fill the width:

.column-main {
  flex: 2;
}

.column-sidebar {
  flex: 1;
}

.column-main width is twice to .column-sidebar.

The flex property controls the size of the flex items along the main axis. It’s shorthand of three properties following:

flex-grow, the default value is 0.
flex-shrink, the default value is 1.
flex-basis, the default value is 0%.

5.2.1 Using the flex-basis property

flex-basis: Define an initial main size. The default value is auto.

Suppose we have a flex-direction: row element, that flex-basis is to define the width of flex items:

When the value is auto:
- Flex items have width, then use the width.
- Flex items didn’t have width, determined by content.
When the value isn’t auto:
- Flex items ignore width, use flex-basic value.

Figure 5.8 Three flex items with a flex-basis of 20%, giving each an initial main size (width)

5.2.2 Using flex-grow

The remainder will be consumed by the flex items based on their flex-grow values.

Figure 5.9 Remaining width partitioned evenly among items with equal flex-grow values

A higher flex-grow value owns more weight.
Figure 5.10 Items with a higher flex-grow value consume a higher proportion of the remaining available width.

💡 Favor to use shorthand flex because these properties omitted will not set the default value.

5.2.3 Using flex-shrink

Flex-shrink follows similar principles as flex-grow, it indicates whether it should shrink to prevent overflow.

Figure 5.12 Flex items can have an initial size exceeding that of the flex container.

5.2.4 Some practical uses

Figure 5.14 Ways you can define item sizes using flex

5.4 Alignment, spacing, and other details

Table 5.1

Table 5.2

6 Grid layout

6.2 Anatomy of a grid

Figure 6.3 The parts of a grid

Grid line
Grid track: A grid track is a space between two adjacent grid lines.
Grid cell
Grid area

    <div class="container">
      <header>
        <h1 class="page-heading">Ink</h1>
      </header>
      <nav>
        <ul class="site-nav">
          <li><a href="/">Home</a></li>
          <li><a href="/features">Features</a></li>
          <li><a href="/pricing">Pricing</a></li>
          <li><a href="/support">Support</a></li>
          <li class="nav-right">
            <a href="/about">About</a>
          </li>
        </ul>
      </nav>

      <main class="main tile">
        <h1>Team collaboration done right</h1>
        <p>
          Thousands of teams from all over the world turn to <b>Ink</b> to
          communicate and get things done.
        </p>
      </main>

      <div class="sidebar-top tile">
        <form class="login-form">
          <h3>Login</h3>
          <p>
            <label for="username">Username</label>
            <input id="password" type="password" name="password" />
          </p>
          <button type="submit">Login</button>
        </form>
      </div>

      <div class="sidebar-bottom tile centered">
        <small>Starting at</small>
        <div class="cost">
          <span class="cost-currency">$</span>
          <span class="cost-dollars">20</span>
          <span class="cost-cents">.00</span>
        </div>
        <a class="cta-button" href="/pricing"> Sign up </a>
      </div>
    </div>

      :root {
        box-sizing: border-box;
      }

      *,
      ::before,
      ::after {
        box-sizing: inherit;
      }

      body {
        background-color: #709b90;
        font-family: Helvetica, Arial, sans-serif;
      }

      .container {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 1.5em;
        max-width: 1080px;
        margin: 0 auto;
      }

      header,
      nav {
        grid-column: 1 / 3;
        grid-row: span 1;
      }

      .main {
        grid-column: 1 / 2;
        grid-row: 3 / 5;
      }

      .sidebar-top {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
      }

      .sidebar-bottom {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
      }

      .tile {
        padding: 1.5em;
        background-color: #fff;
      }

      .tile > :first-child {
        margin-top: 0;
      }

      .tile * + * {
        margin-top: 1.5em;
      }

Figure 6.5 Page with basic grid structure in place

6.2.1 Numbering grid lines

Browser number each grid line:
Figure 6.7 Grid lines are numbered beginning with 1 on the top left. Negative numbers refer to the position from the bottom right.

grid-column is short for grid-column-start and grid-column-end.

grid-row is short for grid-row-start and grid-row-end.

6.2.2 Working together with flexbox

Two important distinctions between flexbox and grid:

Flexbox is one-dimensional, whereas grid is two-dimensional.
Flexbox works from the content out, whereas grid works from the layout in.

The second major distinction, as articulated by CSS WG member Rachel Andrew.

Remaining styling for the page:
Figure 6.9 Fully styled page

      .page-heading {
        margin: 0;
      }

      .site-nav {
        display: flex;
        margin: 0;
        padding: 0.5em;
        background-color: #5f4b44;
        list-style-type: none;
        border-radius: 0.2em;
      }

      .site-nav > li {
        margin-top: 0;
      }

      .site-nav > li > a {
        display: block;
        padding: 0.5em 1em;
        background-color: #cc6b5a;
        color: white;
        text-decoration: none;
      }

      .site-nav > li + li {
        margin-left: 1.5em;
      }

      .site-nav > .nav-right {
        margin-left: auto;
      }

      .login-form h3 {
        margin: 0;
        font-size: 0.9em;
        font-weight: bold;
        text-align: right;
        text-transform: uppercase;
      }

      .login-form input:not([type='checkbox']):not([type='radio']) {
        display: block;
        margin-top: 0;
        width: 100%;
      }

      .login-form button {
        margin-top: 1em;
        border: 1px solid #cc6b5a;
        background-color: white;
        padding: 0.5em 1em;
        cursor: pointer;
      }

      .centered {
        text-align: center;
      }

      .cost {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 0.7;
      }

      .cost > span {
        margin-top: 0;
      }

      .cost-currency {
        font-size: 2rem;
      }
      .cost-dollars {
        font-size: 4rem;
      }
      .cost-cents {
        font-size: 1.5rem;
        align-self: flex-start;
      }

      .cta-button {
        display: block;
        background-color: #cc6b5a;
        color: white;
        padding: 0.5em 1em;
        text-decoration: none;
      }

6.3 Alternate syntaxes

6.3.1 Naming grid lines

Naming three vertical grid lines: start, center, end.

grid-template-columns: [start] 2fr [center] 1fr [end];

Refer to these names:

grid-column: start / center;

Provider multiple names for the same grid line:

grid-template-columns: [left-start] 2fr
					   [left-end right-start] 1fr
					   [right-end];

Using in repeat:

grid-template-columns: repeat(3, [col] 1fr 1fr)

grid-column: col 2 / span 2;

Figure 6.10 Placing a grid item at the second "col" grid line, spanning two tracks (col 2 / span 2)

6.3.2 Naming grid areas

grid-template-areas property let you draw a visual representation of the grid directly into your CSS, using a sort of “ASCII art” syntax.

      .container {
        display: grid;
        /* Assigns each grid cell to a named grid area */
        grid-template-areas: "title title"
                             "nav nav"
                             "main aside1"
                             "main aside2";
        grid-template-columns: 2fr 1fr;
        grid-template-rows: repeat(4, auto);
        gap: 1.5em;
        max-width: 1080px;
        margin: 0 auto;
      }

      header {
        grid-area: title;
      }

      nav {
        grid-area: nav;
      }

      .main {
        grid-area: main;
      }

      .sidebar-top {
        grid-area: aside1;
      }

      .sidebar-top {
        grid-area: aside2;
      }

⚠️ Each named grid area must form a rectangle.

Use period as the name for empty cell:

grid-template-areas: "top  top    right"
					 "left .      right"
					 "left bottom bottom"

6.4 Explicit and implicit grid

To wrap all grid items within the grid container, an implicit grid track will be created if there is no explicit specification for the item.

Implicit grid track has the size of auto. Or you can apply properties to specify the size:

grid-auto-columns
grid-auto-rows

We want to achieve this layout：

First, let’s show all photographs:

<body>
  <div class="portfolio">
    <figure class="featured">
      <img src="images/monkey.jpg" alt="monkey" />
      <figcaption>Monkey</figcaption>
    </figure>
    <figure>
      <img src="images/eagle.jpg" alt="eagle" />
      <figcaption>Eagle</figcaption>
    </figure>
    <figure class="featured">
      <img src="images/bird.jpg" alt="bird" />
      <figcaption>Bird</figcaption>
    </figure>
    <figure>
      <img src="images/bear.jpg" alt="bear" />
      <figcaption>Bear</figcaption>
    </figure>
    <figure class="featured">
      <img src="images/swan.jpg" alt="swan" />
      <figcaption>Swan</figcaption>
    </figure>
    <figure>
      <img src="images/elephants.jpg" alt="elephants" />
      <figcaption>Elephants</figcaption>
    </figure>
    <figure>
      <img src="images/owl.jpg" alt="owl" />
      <figcaption>Owl</figcaption>
    </figure>
  </div>
</body>

    body {
      background-color: #709b90;
      font-family: Helvetica, Arial, sans-serif;
    }

    .portfolio {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      grid-auto-rows: 1fr;
      grid-gap: 1em;
    }

    .portfolio > figure {
      margin: 0;
    }

    .portfolio img {
      max-width: 100%;
    }

    .portfolio figcaption {
      padding: 0.3em 0.8em;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: right;
    }

Auto-fill: Special value for repeat function that indicates browser to place grid track as much as possible.
Auto-fit: Auto-fill maybe cause some empty grid tracks if there are not enough grid items to fill them. Auto-fit will stretch to fill the available space.

6.4.1 Adding variety

Attach featured class to some pictures make the span 2:

<body>
  <div class="portfolio">
    <figure class="featured">
      <img src="images/monkey.jpg" alt="monkey" />
      <figcaption>Monkey</figcaption>
    </figure>
    <figure>
      <img src="images/eagle.jpg" alt="eagle" />
      <figcaption>Eagle</figcaption>
    </figure>
    <figure class="featured">
      <img src="images/bird.jpg" alt="bird" />
      <figcaption>Bird</figcaption>
    </figure>
    <figure>
      <img src="images/bear.jpg" alt="bear" />
      <figcaption>Bear</figcaption>
    </figure>
    <figure class="featured">
      <img src="images/swan.jpg" alt="swan" />
      <figcaption>Swan</figcaption>
    </figure>
    <figure>
      <img src="images/elephants.jpg" alt="elephants" />
      <figcaption>Elephants</figcaption>
    </figure>
    <figure>
      <img src="images/owl.jpg" alt="owl" />
      <figcaption>Owl</figcaption>
    </figure>
  </div>
</body>

.portfolio .featured {
  grid-row: span 2;
  grid-column: span 2;
}

The layout is decided by grid item placement algorithm: places grid items column by column, row by row, according to the order of the items in the markup.

Grid-auto-flow: Manipulate the algorithm. Its initial value is row. If you specify column, the algorithm will place the column first. Good example: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

You can also provide dense that algorithm will fill gaps in the grid even meaning it distorts the order of elements:

 .portfolio {
   /* ... */
   grid-auto-flow: dense;
 }

6.6 Alignment

justify-* for horizontal alignment.
align-* for vertical alignment.

values:

start: Places grid tracks to the top/left of the grid container. (use flex-strat in a flexbox)
end: Places grid tracks to the bottom/left. (use flex-end in a flexbox)
center
stretch: Resizes the tracks to fill the size of the grid container.
space-between: Evenly distributes the remaining space between each grid track (effectively overriding any grid-gap)
space-around: Distributes space between each grid track, with a half-sized space on each end.
space-evenly: Distributes space between each grid track, with an equal amount of space on each end (not supported in flexbox)