Flex布局需精准控制主轴/交叉轴、收缩拉伸逻辑及flex简写隐式行为：横排等宽需父设display:flex、子设flex:1（非仅display:flex）；flex:1以0为基分配空间，flex:auto以内容宽为基；居中须按主轴/交叉轴分用justify-content/align-items；卡顿问题宜改用flex:0 0 50%替代width:50%。
Flex 布局不是“加个 display: flex 就完事”，关键在主轴/交叉轴方向控制、项目收缩与拉伸逻辑、以及 flex 简写值的隐式行为——这些地方一错，布局立刻错位或溢出。
怎么让子元素横排且等宽？别只写 display: flex
只设父容器 display: flex，子项默认不换行、不等宽、不占满剩余空间。必须配合其他属性：
-
flex-wrap: nowrap（默认）→ 横向单行；想换行用wrap - 子项设
flex: 1（等价于flex: 1 1 0），才能均分剩余空间 - 若子项有固有宽度（如带
width: 200px），flex: 1可能失效——先清掉width或设flex-basis: 0 - 示例：
.container { display: flex; }<br>.item { flex: 1; }
flex: 1 和 flex: auto 差在哪？
它们对子项“基准尺寸”的处理完全不同，直接影响是否溢出：
-
flex: 1→flex-grow: 1; flex-shrink: 1; flex-basis: 0%：忽略自身内容宽度，从 0 开始均分空间 -
flex: auto→flex-grow: 1; flex-shrink: 1; flex-basis: auto：先按内容宽度占位，再分配剩余空间 - 文字多的项用
auto容易撑宽整行；卡片类等宽布局必须用1或显式写flex-basis: 0
为什么子元素没居中？justify-content 和 align-items 别混用
这两个属性作用轴不同，常见误配：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
justify-content控制主轴（flex-direction决定是横还是竖）对齐方式 -
align-items控制交叉轴对齐方式（垂直于主轴） - 横向布局（
flex-direction: row）时：
• 水平居中 →justify-content: center
• 垂直居中 →align-items: center - 纵向布局（
flex-direction: column）时，两者作用正好翻转 - 注意：
align-items对单个项目无效，想单独居中某个子项，得用align-self
移动端 flex 布局卡顿？警惕 flex-wrap: wrap + 百分比子项
某些 Android WebView（尤其旧版）在子项用百分比宽度 + flex-wrap 时，会反复重排导致滚动卡顿：
- 临时解法：子项改用
flex: 0 0 50%（即flex-grow: 0; flex-shrink: 0; flex-basis: 50%）代替width: 50% - 更稳方案：用
flex: 1配合固定列数（如两列就包两层flex: 1的 wrapper） - 真要响应式列数变化，优先考虑
display: grid，flex 在复杂流式场景下兼容性和性能都不如 grid
flex 最容易被忽略的其实是 flex-shrink 默认为 1 —— 子项内容稍长就会被压缩变形，而开发者常以为“只是没设宽度”。遇到莫名变窄、文字折行、图标错位，先查 flex-shrink 值和 min-width 是否冲突。
