在响应式布局和组件化开发盛行的今天，Flexbox 已经是前端开发者必须掌握的布局方式。它比传统的 float 更直观，比 Grid 更适合一维排列场景。

1. 什么是 Flexbox

Flexbox（Flexible Box）是一种用于在容器中分配空间和对齐内容的布局模型。它特别适合构建导航栏、卡片列表、居中对齐等一维布局场景。

一个 Flex 容器只需要一行代码：

1
2
3
.container {
  display: flex;
}

2. 主轴与交叉轴

Flexbox 的核心概念是两条轴：

  • 主轴（Main Axis）：由 flex-direction 决定，默认是水平方向（row）。
  • 交叉轴（Cross Axis）：与主轴垂直的方向。
1
2
3
4
5
6
.container {
  display: flex;
  flex-direction: row;     /* row | row-reverse | column | column-reverse */
  justify-content: center; /* 主轴对齐 */
  align-items: center;     /* 交叉轴对齐 */
}

3. 常用属性速查

容器属性

属性 作用
justify-content 主轴对齐方式（如 flex-start、center、space-between）
align-items 交叉轴对齐方式（如 stretch、center、flex-start）
flex-wrap 是否换行（nowrap、wrap、wrap-reverse）
align-content 多行时的整体交叉轴对齐
gap 子项之间的间距

子项属性

属性 作用
flex-grow 剩余空间的放大比例
flex-shrink 空间不足时的缩小比例
flex-basis 子项在分配空间前的默认大小
align-self 单个子项的交叉轴对齐方式

4. 实战：常见页面结构

水平垂直居中

1
2
3
4
5
6
.center-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

自适应导航栏

1
2
3
4
5
6
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

等高卡片列表

1
2
3
4
5
6
7
8
9
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* 可放大、可缩小、基础宽度 300px */
}

5. 什么时候用 Flexbox，什么时候用 Grid

  • Flexbox：一维布局，内容顺序重要，子项大小由内容决定。
  • Grid：二维布局，需要同时控制行和列，适合整体页面骨架。

两者并不互斥，现代页面往往是 Grid 做整体骨架，Flexbox 做组件内部对齐。

总结

Flexbox 极大地简化了 CSS 布局难度。熟练掌握主轴/交叉轴、对齐属性和 flex 缩写，就能应对绝大多数组件级布局需求。