Flexbox 适用于一维对齐与分布，如导航栏、按钮组；Grid 更适合二维页面布局；滥用 Flexbox 做整站布局会降低可维护性。
Flexbox 不是用来“实现页面布局”的万能胶，而是解决特定对齐与分布问题的工具；滥用它做整站布局（比如替代 Grid）反而会让结构更难维护。
什么时候该用 display: flex 而不是 display: grid
当你需要在单行或单列内做元素对齐、等宽拉伸、自动间距分配时，Flexbox 更自然。比如导航栏菜单项水平居中、按钮组右对齐、表单项标签与输入框并排且底部对齐。
- 横向/纵向的一维排列是 Flexbox 的主场；二维网格（行列同时控制）优先选
grid -
flex-wrap: wrap可以折行，但折行后各行独立对齐，无法像grid那样统一控制列宽或跨行对齐 - 响应式中常配合
@media切换flex-direction（如移动端竖排、桌面端横排），这是它比 Grid 更轻量的用法
justify-content 和 align-items 的常见误用
这两个属性作用对象容易混淆：justify-content 控制主轴（flex-direction 决定）上的对齐，align-items 控制交叉轴上的对齐。很多人设了 flex-direction: column 却还用 justify-content: center 想垂直居中——其实这时主轴已是垂直方向，justify-content 管的就是上下对齐。
- 水平居中（主轴为 row）：用
justify-content: center - 垂直居中（主轴为 row）：用
align-items: center - 垂直居中（主轴为 column）：用
justify-content: center - 水平居中（主轴为 column）：用
align-items: center - 如果容器没设高度，
align-items: center在 column 下可能无效——因为交叉轴（此时是水平方向）没约束，浏览器按内容宽度撑开
flex: 1 的实际行为和陷阱
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0 的简写，关键在 flex-basis: 0：它让元素“假装自己宽度为 0”，再按比例瓜分剩余空间。这和设 width: 25% 有本质区别。
- 多个
flex: 1元素会均分父容器剩余空间，不管它们自身内容多宽 - 如果某个子项内容很长（比如超长文本），默认会溢出；加
min-width: 0或overflow: hidden才能触发收缩 -
flex: 0 0 auto才是“不伸缩、不收缩、按内容宽”，别误以为flex: none就够用——老版本 Safari 对none支持差，建议写全
Flexbox 在真实项目中的边界感
它适合组件级布局，比如卡片内的头图、标题、操作按钮排列；不适合当页面骨架——比如把 header、main、footer 全包进一个 flex 容器里，再靠 flex-direction: column 排列。这样一旦 main 高度变化（比如加载更多内容），footer 可能被顶出视口，或出现意外滚动条。
- 整页结构推荐用
display: grid配合minmax()和fr单位 - Flexbox 嵌套层级超过两层就该警惕：可读性下降，调试成本上升
- 某些旧版 iOS Safari（flex-wrap: wrap-reverse 或
align-content支持不稳定，线上项目慎用
