03.Flex弹性布局

Flexbox + Grid 全覆盖：容器六大属性、项目六大属性、flex 三值缩写原理、Grid 行列定义与命名区域、两者选型决策树及混合布局实战。

1. Flexbox 核心概念

Flex 容器的两条轴线：

  主轴 (main axis) — 由 flex-direction 决定（默认水平→）
  ┌─────┬─────┬─────┐
  │item1│item2│item3│  → main axis
  └─────┴─────┴─────┘

  交叉轴 (cross axis) — 垂直于主轴
        ↓ cross axis

.container { display: flex; }  /* 块级 flex 容器 */
.container { display: inline-flex; }  /* 行内 flex 容器 */

---

2. 容器属性（父元素设置）

2.1 flex-direction — 主轴方向

.container { flex-direction: row; }            /* 默认：→ */
.container { flex-direction: row-reverse; }    /* ← */
.container { flex-direction: column; }         /* ↓ */
.container { flex-direction: column-reverse; } /* ↑ */

2.2 flex-wrap — 是否换行

.container { flex-wrap: nowrap; }        /* 默认：不换行，子项被压缩 */
.container { flex-wrap: wrap; }          /* 换行 */
.container { flex-wrap: wrap-reverse; }  /* 反向换行 */

2.3 justify-content — 主轴对齐

.container { justify-content: flex-start; }    /* 靠左（默认） */
.container { justify-content: flex-end; }      /* 靠右 */
.container { justify-content: center; }        /* 居中 */
.container { justify-content: space-between; } /* 两端对齐，间距均分 */
.container { justify-content: space-around; }  /* 每个子项两侧间距相等 */
.container { justify-content: space-evenly; }  /* 所有间隙相等 */

justify-content 视觉对比（4 个子项）：

flex-start:     [A][B][C][D]..........
center:         .....[A][B][C][D].....
space-between:  [A]....[B]....[C]....[D]
space-around:   .[A]...[B]...[C]...[D].
space-evenly:   ..[A]..[B]..[C]..[D]..

2.4 align-items — 交叉轴对齐（单行）

.container { align-items: stretch; }    /* 默认：拉伸填满交叉轴高度 */
.container { align-items: flex-start; } /* 顶部对齐 */
.container { align-items: center; }     /* 居中（最常用于垂直居中） */
.container { align-items: flex-end; }   /* 底部对齐 */
.container { align-items: baseline; }   /* 文本基线对齐 */

2.5 align-content — 多行交叉轴对齐

仅在 flex-wrap: wrap 且有多行时生效：

.container {
  flex-wrap: wrap;
  align-content: space-between;  /* 行间距均分布 */
  align-content: center;         /* 多行整体居中 */
}

2.6 gap — 行/列间距

.container {
  gap: 16px;             /* 行间距 = 列间距 = 16px */
  gap: 20px 12px;        /* 行间距 20px, 列间距 12px */
  row-gap: 20px;         /* 仅行间距 */
  column-gap: 12px;      /* 仅列间距 */
}

---

3. 项目属性（子元素设置）

3.1 flex-grow — 放大比例

/* 默认 0：不放大 */
.item { flex-grow: 0; }

/* 所有子项 flex-grow: 1 → 平分剩余空间 */
.item { flex-grow: 1; }

/* item2 占 2 份，其他各占 1 份 → item2 是其他子项的 2 倍宽 */
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }

3.2 flex-shrink — 缩小比例

/* 默认 1：空间不足时等比例缩小 */
.item { flex-shrink: 1; }

/* 设为 0：不缩小（可能溢出容器） */
.item { flex-shrink: 0; }

3.3 flex-basis — 基础尺寸

.item { flex-basis: 200px; }  /* 主轴方向的初始尺寸 */
.item { flex-basis: auto; }   /* 默认：使用子项自身 width/height */
.item { flex-basis: 0; }      /* 完全由 flex-grow 分配 */

3.4 flex 三值缩写（最常用）

/* flex: flex-grow flex-shrink flex-basis */
.item { flex: 1; }       /* = flex: 1 1 0% */
.item { flex: auto; }    /* = flex: 1 1 auto */
.item { flex: none; }    /* = flex: 0 0 auto（不伸缩） */

/* flex: 1 的实战含义：
   所有空间由子项按 flex-grow 比例分配
   等价于：
*/
.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0%; }

3.5 align-self — 单独覆盖交叉轴对齐

.item { align-self: center; }  /* 仅当前子项居中 */

3.6 order — 排序

.item1 { order: 2; }   /* 默认 0，数值越小越靠前 */
.item2 { order: 1; }
/* 显示顺序：item2 → item1 */

---

4. Grid 布局快速上手

Grid 是二维布局系统，适合复杂的行列布局：

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* 三列：200px + 两等分 */
  grid-template-rows: auto 1fr;          /* 两行：自适应 + 剩余 */
  gap: 16px;
}

4.1 行列定义

/* 关键字 */
grid-template-columns: 200px 1fr 2fr;     /* fr = 比例单位 */
grid-template-columns: repeat(3, 1fr);    /* 三列等分 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* → 自动列数，每列最小 200px，剩余空间均分 */

/* 命名区域 */
grid-template-areas:
  "header header header"
  "sidebar main   main"
  "footer footer footer";

4.2 Flexbox vs Grid 选型

场景	推荐	原因
一维排列（导航栏、按钮组）	Flexbox	单轴控制更简洁
二维布局（页面骨架、卡片网格）	Grid	行列同时控制
内容数量不确定的自适应	Flexbox	自然换行
固定行列数的布局	Grid	精确控制每一格
主轴上的对齐/间距	Flexbox	justify-content/gap
交叉轴上的等高等宽	Grid	隐式行列对齐

---

5. 实战：常见 Flex 布局模式

/* ① 水平垂直居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ② 左固定 + 右自适应 */
.layout {
  display: flex;
}
.sidebar { width: 250px; flex-shrink: 0; }
.main    { flex: 1; }

/* ③ 等宽卡片网格 */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 280px;  /* 最小 280px，空间足够时均分 */
}

/* ④ 底部 footer 粘底 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }   /* main 撑开剩余空间 */

/* ⑤ 导航栏两端对齐 */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

---

下一篇：04.CSS定位与层级 — 五种 position 全解、z-index 层叠上下文、containing block。