Flex 布局精讲

Flex（弹性盒子）布局是 CSS3 引入的一种现代布局方式，旨在提供更高效、灵活的容器内子元素排列方式。它特别适合 一维布局（行或列），比传统布局（如浮动、定位）更简单、更强大。

---

1. Flex 布局的核心概念

1.1 Flex 容器（Flex Container）

通过 display: flex 或 display: inline-flex 将一个元素定义为 Flex 容器，其直接子元素自动成为 Flex 项目（Flex Items）。

.container {display: flex; /* 或 inline-flex */
}

1.2 主轴（Main Axis）与交叉轴（Cross Axis）

• 主轴：Flex 项目的默认排列方向（水平或垂直）。
• 交叉轴：与主轴垂直的方向。

属性	主轴方向	交叉轴方向
flex-direction: row（默认）	水平（从左到右）	垂直（从上到下）
flex-direction: column	垂直（从上到下）	水平（从左到右）

---

2. Flex 容器的属性

2.1 主轴方向控制：flex-direction

.container {flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：水平排列（左→右）。
• row-reverse：水平反向排列（右→左）。
• column：垂直排列（上→下）。
• column-reverse：垂直反向排列（下→上）。

2.2 换行控制：flex-wrap

.container {flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：不换行（可能溢出）。
• wrap：换行（从上到下）。
• wrap-reverse：反向换行（从下到上）。

2.3 主轴对齐：justify-content

.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

值	效果
flex-start	向主轴起点对齐（默认）
flex-end	向主轴终点对齐
center	居中
space-between	两端对齐，项目间距相等
space-around	项目两侧间距相等（边缘间距为中间一半）
space-evenly	所有间距（包括边缘）完全相等

2.4 交叉轴对齐：align-items

.container {align-items: stretch | flex-start | flex-end | center | baseline;
}

值	效果
stretch（默认）	拉伸填满容器高度（需无固定高度）
flex-start	向交叉轴起点对齐（顶部对齐）
flex-end	向交叉轴终点对齐（底部对齐）
center	居中
baseline	按第一行文字的基线对齐

2.5 多行对齐：align-content

.container {align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

• 仅在多行（flex-wrap: wrap）时生效，控制行与行之间的间距。

---

3. Flex 项目的属性

3.1 项目排序：order

.item {order: 0; /* 默认值，数值越小越靠前 */
}

• 通过 order 调整项目的显示顺序（无需修改 HTML 结构）。

3.2 项目伸缩比例：flex-grow

.item {flex-grow: 0; /* 默认不拉伸 */
}

• 定义项目的放大比例（剩余空间分配）。
• 值为 1 时，项目会拉伸填充剩余空间。

3.3 项目收缩比例：flex-shrink

.item {flex-shrink: 1; /* 默认允许收缩 */
}

• 定义项目的缩小比例（空间不足时）。
• 值为 0 时，项目不收缩（可能溢出）。

3.4 项目基准大小：flex-basis

.item {flex-basis: auto | 100px; /* 默认 auto */
}

• 定义项目在分配多余空间之前的初始大小。
• 类似 width，但优先级更高。

3.5 简写属性：flex

.item {flex: flex-grow flex-shrink flex-basis;flex: 1 1 100px; /* 常用写法 */
}

• 默认值：flex: 0 1 auto（不拉伸，可收缩，初始大小由内容决定）。

3.6 单独对齐：align-self

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• 覆盖容器的 align-items 设置，单独控制某个项目的交叉轴对齐方式。

---

4. 实战示例

4.1 水平居中导航栏

<div class="nav"><div>Home</div><div>About</div><div>Contact</div>
</div>

.nav {display: flex;justify-content: center; /* 水平居中 */gap: 20px; /* 项目间距 */
}

4.2 圣杯布局（Header + Content + Footer）

<div class="container"><header>Header</header><main>Content</main><footer>Footer</footer>
</div>

.container {display: flex;flex-direction: column;min-height: 100vh;
}
main {flex: 1; /* 填充剩余空间 */
}

4.3 等高卡片

.card-container {display: flex;gap: 10px;
}
.card {flex: 1; /* 等宽 + 等高 */background: #f0f0f0;
}

---

5. Flex 布局的优缺点

优点：

• 简单易用：比浮动、定位更直观。
• 响应式友好：轻松适配不同屏幕尺寸。
• 对齐灵活：内置多种对齐方式。

缺点：

• 一维布局：不适合复杂二维布局（需用 Grid）。
• 旧浏览器兼容性：IE 11 部分支持（需加 -ms- 前缀）。

---

6. 总结

• Flex 布局 = 容器 + 项目：通过 display: flex 激活。
• 主轴与交叉轴：控制排列方向和对齐方式。
• 常用场景：导航栏、卡片布局、垂直居中、等分布局等。