标准答案
- Flex 是一维布局模型，重点处理一行或一列上的空间分配。
- 主轴由 flex-direction 决定，row 时主轴是水平方向，column 时主轴是垂直方向；垂直于主轴的是交叉轴。
- 容器上的 justify-content 控制主轴对齐和剩余空间分配，align-items 控制交叉轴对齐，gap 控制项目间距。
- 项目上的 flex-basis 是参与分配前的基础尺寸，flex-grow 表示有剩余空间时按比例放大，flex-shrink 表示空间不够时按比例缩小。
- 要注意 Flex 的计算发生在主轴方向上，不一定是宽度；flex-direction: column 时，这些属性影响的是高度方向。
题目解析
这题重点是建立主轴模型。很多错误来自默认把主轴当成水平方向，但 column 下主轴会变成垂直方向。
Flex 子项默认 min-width: auto，内容过长时可能不缩小，工程中经常需要给子项加 min-width: 0。
代码示例
左侧固定，右侧自适应，是 Flex 的典型场景。
CSS
.layout {
display: flex;
gap: 16px;
}
.sidebar {
flex: 0 0 240px;
}
.content {
flex: 1 1 0;
min-width: 0;
}常见误区
- 把 justify-content 和 align-items 固定理解成水平和垂直，忽略主轴会改变。
- 认为 flex-grow 是直接设置宽度百分比。
- 忘记 min-width: 0，导致 flex 子项内容溢出。