Flex / Grid 与典型布局

Flex（一维）

适用于 单行或单列 的主轴分配：导航、工具栏、等高列、底部对齐。

核心属性：

• 容器：display: flex、flex-direction、justify-content、align-items、flex-wrap、gap
• 项目：flex-grow、flex-shrink、flex-basis，简写 flex: 1 1 auto

# 描述
flex-basis：定义子元素基础大小，优先级高于 width。
flex-grow 是否可放大，0 不可放大，默认 0
flex-shrink 是否可缩小，0 不可缩小，默认 1

# 常见 flex
flex: 1; 等价：1 1 0% ，可放大、可缩小、基础宽度为 0
flex: 0; 等价：0 1 0% ，不放大、可缩小、基础宽度为 0
flex: auto; 等价：1 1 auto，可放大、可缩小、基础宽度为内容宽度
flex: none; 等价：0 0 auto，失去弹性+默认宽高
flex: 0 0 100px; 失去弹性并覆盖默认宽高

---

Grid（二维）

适用于 行 + 列 同时定义：整页骨架、卡片矩阵、不规则区域。

核心属性：

• 容器：display: grid、grid-template-columns / rows、gap、grid-template-areas
• 项目：grid-column / grid-row 跨格

fr、minmax()、repeat()、auto-fill / auto-fit 常用于响应式轨道。

---

多列布局（Multi-column）

适合 报纸式分栏、简易瀑布流：column-count、column-gap，子项 break-inside: avoid 防止卡片被拦腰折断。

.waterfall {
  column-count: 3;
  column-gap: 16px;
}
.waterfall > .card {
  break-inside: avoid;
  margin-bottom: 16px;
}

复杂瀑布流也可交给 JS + 绝对定位或 Masonry 库；多列方案适合 高度不一但列数固定 的场景。

---

响应式布局要点

• meta viewport 配合 媒体查询 @media (max-width: …)。
• Flex/Grid + gap 优于纯粹百分比浮动。
• 移动优先：先写窄屏，再用 min-width 放大。

/* 移动优先就是先编写移动端窄屏默认样式，再通过 min-width 从小到大逐级适配平板、桌面大屏，样式向上叠加，更适配移动端流量为主的现代网页，结构更清晰、维护更简单 */
/* 1. 默认：先写 移动端 样式（320px~767px 手机） */
.container {
  /* 手机单列、小间距、小字体 */
  padding: 16px;
  font-size: 14px;
  display: grid;
  grid-template-columns: 1fr; /* 单列 */
  gap: 12px;
}

/* 2. min-width 往上叠加：平板 ≥768px */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    font-size: 15px;
    grid-template-columns: repeat(2, 1fr); /* 两列 */
    gap: 16px;
  }
}

/* 3. 桌面大屏 ≥1200px */
@media (min-width: 1200px) {
  .container {
    padding: 32px;
    font-size: 16px;
    grid-template-columns: repeat(3, 1fr); /* 三列 */
    max-width: 1200px;
    margin: 0 auto;
  }
}

---

常见场景对照

场景	倾向
顶部导航 + 两侧留白	Flex justify-content: space-between
圣杯 / 等高侧栏	Flex 或 Grid 区域
整体页面网格	Grid template-areas
卡片瀑布（简单）	Multi-column + break-inside

更细的「水平垂直居中」见 05。