一、Flex 布局（Flexible Box）

Flex 是一种一维布局方式，用于沿主轴（main axis）和交叉轴（cross axis）高效地排列元素。适合在水平方向或垂直方向上对齐内容。

1. Flex 容器属性

display: flex;
flex-direction: row | row-reverse | column | column-reverse;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
flex-wrap: nowrap | wrap | wrap-reverse;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

（1）flex-direction：主轴方向

• row：从左到右（默认）

• row-reverse：从右到左

• column：从上到下

• column-reverse：从下到上

（2）justify-content：主轴对齐方式

值	说明
flex-start	元素从主轴起始端对齐
flex-end	元素从主轴末端对齐
center	元素居中对齐
space-between	两端对齐，元素间间隔平均
space-around	元素两侧间隔相等
space-evenly	所有间隔（含边缘）平均

（3）align-items：交叉轴对齐方式

值	说明
stretch	默认值，子项在交叉轴方向被拉伸填满容器
flex-start	元素与交叉轴起始端对齐
flex-end	元素与交叉轴末端对齐
center	元素在交叉轴方向居中对齐
baseline	元素按文本基线对齐

（4）flex-wrap：换行控制

• nowrap：默认，不换行

• wrap：超出容器宽度时自动换行

• wrap-reverse：反向换行（新行在上方）

（5）align-content：多行对齐（仅多行时有效）

与 justify-content 类似，用于多行内容的垂直分布。

---

2. Flex 子项属性

flex-grow: <number>;   /* 放大比例 */
flex-shrink: <number>; /* 缩小比例 */
flex-basis: <length>;  /* 元素在分配前的初始大小 */
order: <integer>;      /* 排列顺序 */
align-self: auto | flex-start | flex-end | center | baseline | stretch;

属性	含义	默认值
flex-grow	元素在有剩余空间时的放大比例	0
flex-shrink	元素在空间不足时的缩小比例	1
flex-basis	元素的初始尺寸	auto

flex-grow / flex-shrink 计算方式

1. 计算自由空间： free = 容器主轴长度 − 所有子项基础尺寸之和

2. 放大阶段（grow）：

   • 如果 free > 0，每个子项的增量：增量_i = free × (grow_i / Σgrow)

   • 最终尺寸：最终_i = basis_i + 增量_i

3. 收缩阶段（shrink）：

   • 如果 free < 0，每个子项缩量：缩量_i = |free| × (shrink_i × basis_i) / Σ(shrink × basis)

   • 最终尺寸：最终_i = basis_i − 缩量_i

例 1：flex-grow 放大

/* 容器宽 600px */
.item1 { flex: 1; }
.item2 { flex: 2; }
.item3 { flex: 1; }

三项 grow 和为 4，剩余空间 200px → 三项分配：50px, 100px, 50px

例 2：flex-shrink 缩小

/* 容器宽 400px */
.item1 { flex: 1 1 200px; }
.item2 { flex: 1 1 300px; }

基础和为 500px，多出 100px → 根据 shrink×basis 比例收缩：(200×1):(300×1)=2:3，
结果 item1 减 40px，item2 减 60px。

align-self 与 order

• align-self：单独设置某个子项的交叉轴对齐方式，覆盖 align-items。

• order：控制视觉顺序，值越小越靠前（默认 0），但不会改变 DOM 顺序。

.container { display: flex; align-items: center; }
.item:nth-child(2) { align-self: flex-start; order: -1; }

---

3. 常见布局示例

水平垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

等宽三列

.container {
  display: flex;
}
.item {
  flex: 1;
}

固定侧栏 + 自适应主内容

.container {
  display: flex;
}
.sidebar {
  flex: 0 0 200px;
}
.main {
  flex: 1;
}

---

二、Grid 布局（Grid Layout）

Grid 是一种二维布局系统，允许在行（row）和列（column）两个方向上同时控制布局，适合用于网页整体结构设计。

1. 基本语法

display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 300px auto;
gap: 10px;

单位类型：

类型	示例	说明
绝对单位	px, em, rem	固定大小
相对单位	%, vw, vh	相对于视窗或父容器
自动单位	auto	根据内容自动调整
弹性单位	fr	按比例分配剩余空间

示例：

grid-template-columns: repeat(3, 1fr); /* 三列等分 */
grid-template-columns: repeat(2, 100px 1fr); /* 每组为固定+弹性 */

与传统布局方式的对比

方案	特征	缺陷	Grid 优势
float	一维布局	清除浮动繁琐、垂直对齐困难	Grid 原生支持行列控制与 gap 间距
inline-block	行内布局	空白缝隙、对齐复杂	Grid 轨道系统无缝分布，无需微调
table	二维布局	非语义化、结构死板	Grid 语义化强，结构灵活且响应式
absolute	绝对定位	脱离文档流、维护成本高	Grid 可响应缩放，保留结构流
Flex	一维布局	二维适配困难	Grid 能同时控制行列，实现网格化分区

---

2. 定义网格线（grid lines）

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

或简写：

grid-column: 1 / 3;
grid-row: 2 / 4;

span 关键字

grid-column: span 2;

代表该元素跨越两列。

---

3. 命名区域（Grid Template Areas）

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.content { grid-area: content; }
.footer { grid-area: footer; }

---

4. 容器级对齐与项目对齐

Grid 有两类对齐方式：

1. 容器级对齐（整体网格在容器内的放置）：

   • justify-content：控制整个网格沿水平方向的对齐方式。

   • align-content：控制整个网格沿垂直方向的对齐方式。

   • 仅当网格总尺寸小于容器空间时生效。

2. 项目级对齐（单元格内部内容对齐）：

   • justify-items / align-items：设置所有单元格内容的默认对齐。

   • justify-self / align-self：针对单个网格项覆盖默认对齐。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(2, 150px);
  width: 600px;
  height: 400px;
  justify-content: space-around; /* 网格整体水平分布 */
  align-content: center;          /* 网格整体垂直居中 */
  justify-items: center;          /* 每个单元格内容水平居中 */
  align-items: start;             /* 每个单元格内容顶部对齐 */
}
.item:nth-child(2) {
  justify-self: end;
  align-self: center;
}

---

5. 响应式布局

结合 @media 实现不同屏幕下的布局变化：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "content"
      "footer";
  }
}

---

6. minmax() 与自动填充

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

• minmax(200px, 1fr)：定义列的最小和最大范围。

• auto-fill：尽可能填满容器，可能产生空列。

• auto-fit：自动压缩多余列，使布局更紧凑。

---

7. 网格间距（gap）

gap: 20px; /* 行列统一间距 */
row-gap: 10px; /* 行间距 */
column-gap: 15px; /* 列间距 */

---

8. 实例：简易网页结构

<div class="layout">
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav content aside"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: aside; }
footer { grid-area: footer; }

---

三、Flex 与 Grid 对比总结

对比项	Flex	Grid
维度	一维布局	二维布局
方向	仅主轴与交叉轴	同时控制行与列
典型用途	导航栏、按钮组	页面整体布局、卡片分布
属性	justify-content / align-items	grid-template / gap / area
弹性特征	动态内容适配	精确网格控制
优势	简单灵活、内容驱动	精确布局、响应式强、区域命名

---

四、实战练习

1. 使用 Flex 实现响应式三栏布局（侧栏固定，内容自适应）。

2. 使用 Grid 实现自适应九宫格图片布局。

3. 综合应用 Flex + Grid 实现完整后台管理页面结构。