外观
Flex 布局怎么讲清楚？
Flex 有主轴和交叉轴。容器负责方向、换行和两条轴上的对齐；项目用 flex 决定如何分配剩余空间。flex: 1 表示可伸展、可收缩、基础尺寸为 0。
原理
容器上常用的属性：
flex-direction：主轴方向，默认row。flex-wrap：默认不换行。nowrap时项目可以被压到比内容更小，也可以溢出。justify-content：主轴上的分布。align-items：交叉轴上每一行里的对齐，默认stretch。align-content：多行之间在交叉轴上怎么分布。只有一行时不起作用。gap：项目间距，不需要用 margin 模拟。
项目上的 flex 是 flex-grow、flex-shrink、flex-basis 的简写：
flex: initial（默认）等于0 1 auto：不放大，可以缩小，基础尺寸看内容和width。flex: 1等于1 1 0%：剩余空间按比例分，基础尺寸从 0 算起。flex: auto等于1 1 auto：先按内容占位，再分剩余空间。flex: none等于0 0 auto：尺寸不参与伸缩。
默认 min-width: auto，项目不会缩到比内容更窄。长文本或长单词会把一行撑破。需要它服从容器时，给项目加 min-width: 0。
margin-left: auto 会吃掉主轴上该侧的剩余空间，常用来把一组按钮推到右边。
追问
flex: 1 和 flex: auto 的差别？
flex: 1 的基础尺寸是 0，兄弟之间主要按 grow 的比例分整个主轴。flex: auto 先保留内容宽度，只把多出来的空间拿去分。两个按钮里文字长度差很多时，视觉上会不一样。
什么时候不用 Flex？
二维网格、明确的行和列，用 Grid。未知数量的单行或单列分布、对齐、空间分配，用 Flex。
易错点
align-items管的是交叉轴，不是主轴。flex-direction: column之后两条轴对调。- 只写
flex-grow: 1时，基础尺寸仍是auto，效果接近flex: auto，不是flex: 1。 - 子项设了
flex: none又抱怨它不缩小。那就是这个值的含义。