[!info] related notes

• 所属 MOC: 前端基础 MOC
• 并列概念: grid, box-model
• 相关概念: inline-flex
• 面试问法: flex-vs-grid-interview-question

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 更像“沿一条轴排队”。

面试要点

来自 flex-vs-grid-interview-question 的面试视角整理。

一句话回答

Flex 更适合处理一条主轴上的排列和对齐，Grid 更适合同时管理行和列的二维布局。

最稳的回答主线

Flex

• 更适合单行或单列布局
• 更关注子项怎么沿主轴分配空间

Grid

• 更适合整体网格结构
• 更关注页面如何按行列分区

面试里一句很稳的话

如果问题是“这一排元素怎么分布”，先想到 Flex；如果问题是“整个页面几行几列怎么排”，先想到 Grid。

最短记忆方式

Flex 管一条轴，Grid 管两条轴。

Related notes

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