如何使用Flexbox实现页面布局_使用Flexbox进行灵活布局

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 支持不稳定，线上项目慎用