Flex 布局

Flex 适合处理一维布局，主轴、交叉轴和可伸缩尺寸是排查布局问题的三个抓手。

核心说明

Flexbox 解决一维布局问题。容器通过 flex-direction、justify-content 和 align-items 定义轴与对齐方式，子项通过 flex-grow、flex-shrink 和 flex-basis 参与剩余空间分配。

关键点

• 先确定主轴，再判断 justify-content 和 align-items 分别作用在哪个方向。
• flex: 1 并不等于简单的 width: 100%，它会参与可用空间计算。
• 长内容导致不收缩时，常需要给 flex 子项设置 min-width: 0。