弹性盒布局下

交叉轴对齐

容器上 align-items：stretch、center、flex-start 等；单行多余空间分配用 align-content。

子项

• flex: 1 常表示均分剩余空间
• flex-grow、flex-shrink、flex-basis 细粒度控制
• align-self 单独对齐某一子项
• order 改变视觉顺序

小结

导航栏居中、底部贴齐、等高列等场景 Flex 非常高效。