[!info] related notes

• 所属 MOC: 前端基础 MOC
• 并列概念: grid, box-model
• 相关概念: inline-flex
• 深入参考: CSS Flexbox
• 关系笔记: Flex vs Grid

Flex 布局

Flexbox 是一维布局系统，核心是在一条主轴上管理子元素的排列、对齐和伸缩。

一句话定义

如果你关心的是“这一行怎么排”或“这一列怎么排”，通常先想到 Flex。

两个最重要的轴

主轴

由 flex-direction 决定，是子元素主要排列的方向。

交叉轴

与主轴垂直，用来处理另一维度上的对齐。

容器最常见的属性

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

• flex-direction：主轴方向
• justify-content：主轴对齐
• align-items：交叉轴对齐
• flex-wrap：是否换行

[!info] 记忆方法

• Justify（对齐/调整）： 在排版软件（如 Word）中，“两端对齐”叫做 Justify。文字书写的方向就是它的“主航道”。所以 justify 负责顺着主轴方向的拉伸和分配。
• Align（校准/对正）： 想象一排运动员，他们排队向前走（主轴），教练大喊“向右看齐”或“保持队形整齐”，这种侧向的校准就是 Align。

为什么它适合一维布局

因为它更擅长处理：

• 单行导航
• 按钮组
• 左右分栏
• 卡片横向排列

常见误区

• 把 Flex 当成所有布局问题的默认解法
• 对二维栅格场景仍然硬用 Flex 拼多行多列
• justify-content 和 align-items 总是分不清主轴和交叉轴

最短记忆方式

Flex 更像“沿一条轴排队”。

与 Grid 的关系

Flex 本页只维护一维布局模型；二维布局与工具选择边界统一放在 Flex vs Grid。

学习检查

不看正文回答：

1. Flex 的主轴与交叉轴分别由什么决定？
2. justify-content 与 align-items 为什么不能死记成“水平 / 垂直”？
3. flex-wrap 改变了什么，没有改变什么？
4. 一个 item 为什么会伸缩？flex-grow / flex-shrink / basis 分别控制什么？
5. 哪类布局问题天然适合 Flex，哪类应该先去 Flex vs Grid 判断？
6. 给一排按钮、两列卡片、垂直居中三个场景，先描述轴模型再写 CSS。

Related notes

• 前端工程化MOC
• 前端基础MOC
• CSS MOC
• ECMAScript MOC