flex布局需配合主轴/交叉轴控制、flex简写隐式行为等属性才能生效：仅设display:flex子项不会等宽或居中；flex:1以0为基均分空间，flex:auto以内容宽为基易溢出；卡顿时宜用flex:0 0 50%替代width:50%。
直接在父容器上加 display: flex 就能启用 Flex 布局，但只写这一句几乎必然出问题——子项不会自动等宽、不会居中、可能溢出或堆叠，必须配合其他属性才能达到预期效果。
父容器设 display: flex 后，子项为什么还是竖着排或没占满？
因为 Flex 默认主轴是水平方向（flex-direction: row），但子项自身有固有尺寸（比如带 width: 200px），且未设置拉伸行为：
-
flex: 1才会让子项均分剩余空间；只写display: flex，子项仍按原始宽高渲染 - 若子项写了
width，会干扰flex的分配逻辑，建议清掉或改用flex-basis - 想让三列横排等宽，父容器加
display: flex，每个子项必须加flex: 1（等价于flex: 1 1 0）
flex: 1 和 flex: auto 在 index.html 里实际表现差在哪？
它们对“基准尺寸”的处理完全不同，直接影响是否撑开容器：
-
flex: 1→flex-basis: 0%：忽略文字/图片等内容宽度，从零开始均分空间，适合卡片、按钮组等强一致性布局 -
flex: auto→flex-basis: auto：先按内容宽度占位，再分剩余空间，文字多的项会变宽，容易导致换行或溢出 - 例如：两个
<div class="item">短</div>和<div class="item">这是一段非常长的文字</div>，用flex: auto会让后者明显更宽
移动端 index.html 用 Flex 布局滚动卡顿怎么办？
某些 Android WebView（尤其旧版）在结合 flex-wrap: wrap 和百分比宽度时，会反复重排造成卡顿：
- 避免给子项同时设
width: 50%和flex-wrap: wrap - 改用
flex: 0 0 50%（即flex-grow: 0; flex-shrink: 0; flex-basis: 50%）替代width - 如果需要响应式列数变化（如小屏两列、大屏三列），
display: grid比 Flex 更稳，兼容性和性能都更好
Flex 不是加个 display: flex 就完事的布局开关，真正难的是理解 flex-basis 怎么和内容宽度互动、justify-content 和 align-items 各管哪根轴、以及不同浏览器对 flex-wrap + 百分比的实现差异——这些地方一错，页面就看起来“明明写了却没生效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
