Layout 


https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Grids
https://developer.mozilla.org/en-US/docs/Web/CSS/position
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries

1. Layout Mental Model#

布局先问 5 个问题:
    element display 是什么:
        block / inline / inline-block / flex / grid

    parent 是谁:
        子元素很多布局行为由 parent 决定

    size 从哪里来:
        content / parent / viewport / min-max constraint

    space 怎么分:
        margin / gap / justify / align

    是否脱离 normal flow:
        position absolute / fixed 会影响文档流

2. Normal Flow#

一句话：不写布局时，block 从上到下排，inline 在一行里排。

demo: block and inline#

<!doctype html>
<html>
<head>
  <style>
    .block {
      margin: 8px 0;
      padding: 12px;
      background: #dbeafe;
    }

    .inline {
      padding: 4px 8px;
      background: #bbf7d0;
    }
  </style>
</head>
<body>
  <div class="block">Block takes a new line</div>
  <div class="block">Another block takes another line</div>
  <p>
    Text with <span class="inline">inline item</span>
    and <span class="inline">another inline item</span>.
  </p>
</body>
</html>
观察:
    div 默认 block
    span 默认 inline
    inline 的 width/height 不像 block 那样直接控制布局

3. Flexbox#

一句话：Flexbox 适合一维布局，一行或一列，把剩余空间分给 items。

demo: app toolbar#

<!doctype html>
<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }

    .toolbar {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
    }

    .brand {
      font-weight: 700;
    }

    .search {
      flex: 1;
      min-width: 120px;
      padding: 8px 10px;
    }

    .button {
      padding: 8px 12px;
    }
  </style>
</head>
<body>
  <header class="toolbar">
    <div class="brand">Orders</div>
    <input class="search" placeholder="Search orders" />
    <button class="button">Create</button>
  </header>
</body>
</html>
关键:
    display: flex creates flex formatting context
    gap controls spacing between items
    align-items controls cross axis alignment
    flex: 1 lets search take remaining space
    min-width prevents input from shrinking too far

4. Flex Wrap#

一句话：当一行放不下时，flex-wrap 可以换行，适合 tags、toolbar actions。

demo: chips wrap#

<!doctype html>
<html>
<head>
  <style>
    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      max-width: 360px;
      padding: 12px;
      border: 1px solid #e5e7eb;
    }

    .chip {
      padding: 6px 10px;
      border-radius: 999px;
      background: #f1f5f9;
    }
  </style>
</head>
<body>
  <div class="filters">
    <span class="chip">paid</span>
    <span class="chip">pending</span>
    <span class="chip">refunded</span>
    <span class="chip">international</span>
    <span class="chip">high value</span>
  </div>
</body>
</html>

5. Grid#

一句话：Grid 适合二维布局，同时控制 rows 和 columns。

demo: dashboard grid#

<!doctype html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 16px;
      font-family: system-ui, sans-serif;
      background: #f8fafc;
    }

    .dashboard {
      display: grid;
      grid-template-columns: 240px 1fr 320px;
      gap: 16px;
      min-height: 420px;
    }

    .panel {
      padding: 16px;
      border: 1px solid #e5e7eb;
      background: white;
    }

    .main {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 16px;
    }
  </style>
</head>
<body>
  <div class="dashboard">
    <aside class="panel">Sidebar</aside>
    <main class="main">
      <section class="panel">Chart header</section>
      <section class="panel">Main chart</section>
    </main>
    <aside class="panel">Activity</aside>
  </div>
</body>
</html>
关键:
    240px and 320px are fixed columns
    1fr takes remaining space
    gap replaces manual margins between grid items

6. Responsive Grid#

一句话：auto-fit + minmax 可以让卡片布局自动适应屏幕。

demo: cards without media query#

<!doctype html>
<html>
<head>
  <style>
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
    }

    .card {
      min-height: 100px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      background: #ffffff;
    }
  </style>
</head>
<body>
  <div class="cards">
    <div class="card">Revenue</div>
    <div class="card">Orders</div>
    <div class="card">Refunds</div>
    <div class="card">Conversion</div>
  </div>
</body>
</html>
观察:
    container wide enough -> multiple columns
    container narrow -> columns collapse naturally

7. Grid Areas#

一句话：页面骨架可以用 grid-template-areas 表达，比到处写定位更清晰。

demo: page shell#

<!doctype html>
<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }

    .shell {
      display: grid;
      grid-template-areas:
        "header header"
        "nav main";
      grid-template-columns: 220px 1fr;
      grid-template-rows: 56px 1fr;
      min-height: 100vh;
    }

    header { grid-area: header; background: #0f172a; color: white; }
    nav { grid-area: nav; background: #f1f5f9; }
    main { grid-area: main; background: white; }

    header,
    nav,
    main {
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="shell">
    <header>Header</header>
    <nav>Nav</nav>
    <main>Main content</main>
  </div>
</body>
</html>

8. Position#

一句话：position 用来处理局部覆盖、sticky header、popover，不应该替代普通布局。

demo: badge and sticky#

<!doctype html>
<html>
<head>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
    }

    .header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: white;
      border-bottom: 1px solid #e5e7eb;
    }

    .card {
      position: relative;
      width: 260px;
      margin: 24px;
      padding: 24px;
      border: 1px solid #e5e7eb;
    }

    .badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 6px;
      border-radius: 999px;
      background: #dc2626;
      color: white;
      font-size: 12px;
    }

    .spacer {
      height: 120vh;
    }
  </style>
</head>
<body>
  <div class="header">Sticky header</div>
  <div class="card">
    <span class="badge">New</span>
    Card content
  </div>
  <div class="spacer"></div>
</body>
</html>
关键:
    absolute looks for nearest positioned ancestor
    card position: relative becomes badge containing block
    sticky stays in normal flow until scroll threshold

9. Responsive Layout#

一句话：responsive 不是只写 breakpoint，而是让布局有合理的默认伸缩规则。

demo: sidebar becomes top nav#

<!doctype html>
<html>
<head>
  <style>
    .layout {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 16px;
    }

    .nav,
    .content {
      padding: 16px;
      border: 1px solid #e5e7eb;
    }

    @media (max-width: 700px) {
      .layout {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="layout">
    <nav class="nav">Navigation</nav>
    <main class="content">Content</main>
  </div>
</body>
</html>
实践:
    mobile first 通常更容易
    breakpoint 应该由内容什么时候放不下决定
    不要只按设备名称决定 breakpoint

10. Container Query#

一句话：media query 看 viewport，container query 看组件容器，更适合复用组件。

demo: card changes by parent width#

<!doctype html>
<html>
<head>
  <style>
    .wrap {
      container-type: inline-size;
      max-width: 720px;
      border: 1px dashed #94a3b8;
      padding: 12px;
    }

    .product {
      display: grid;
      gap: 12px;
      padding: 12px;
      border: 1px solid #e5e7eb;
    }

    .image {
      min-height: 120px;
      background: #dbeafe;
    }

    @container (min-width: 520px) {
      .product {
        grid-template-columns: 160px 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <article class="product">
      <div class="image"></div>
      <div>
        <h2>Product</h2>
        <p>Resize the wrapper width and watch layout change.</p>
      </div>
    </article>
  </div>
</body>
</html>

11. Layout Decision#

Need Choose
Text and simple document flow normal flow
Center one item flex
Toolbar / nav / row actions flex
Card list with wrapping grid or flex-wrap
Dashboard / page shell grid
Overlay badge / popover anchor position
Component responds to own width container query
Page responds to viewport media query 
debug method:
    add border/background to parent and child
    inspect computed display
    check width/min-width/max-width
    check gap/margin
    check whether position removes item from normal flow
Advanced Forward