父容器仅设display:flex无效，因子项默认不拉伸、不换行、不处理剩余空间，需配合flex-direction、flex-wrap、justify-content等属性才能生效。
display: flex 不是加了就自动等宽居中，关键在后续属性怎么配。
父容器只写 display: flex 为什么没效果？
因为子项默认不拉伸、不换行、也不处理剩余空间。常见表现：子项挤在左上角，宽度还是内容宽，右边大片空白。
- 必须显式设
flex-direction（默认是row，但别依赖默认） - 若要换行，得加
flex-wrap: wrap；否则超长直接溢出容器 - 子项若带
width（比如width: 200px），会干扰flex的空间分配逻辑——优先清掉或用flex-basis替代
flex: 1 和 flex: auto 到底该选哪个？
差在“基准尺寸”怎么算，直接影响是否撑开、溢出或不均分：
-
flex: 1→flex-basis: 0%：无视内容宽度，从零开始均分剩余空间，适合卡片、网格类等宽布局 -
flex: auto→flex-basis: auto：先按文字/图片等内容实际宽度占位，再分剩余空间，适合导航栏里文字长度差异大的场景 - 混用时容易错乱：比如一个子项用
flex: 1，另一个用flex: auto，后者可能把前者挤变形
为什么子元素看起来没居中？
justify-content 和 align-items 控制的是不同轴，不能互换：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 横向主轴（
flex-direction: row）：水平居中看justify-content: center，垂直居中看align-items: center - 纵向主轴（
flex-direction: column）：两者作用翻转，justify-content管上下，align-items管左右 - 单个子项想单独对齐？
align-self才是它的控制开关，align-items对它无效
移动端滚动卡顿，是不是 flex-wrap 搞的？
是的，尤其旧版 Android WebView 遇到 flex-wrap: wrap + 百分比宽度（如 width: 50%）时，会反复重排导致卡顿。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：子项改用
flex: 0 0 50%（即固定尺寸、不伸缩）代替width: 50% - 更稳方案：放弃动态列数，用两层嵌套 —— 外层
display: flex，内层每两个子项包一个flex: 1的 wrapper - 真要响应式变列数（比如从 2 列切到 3 列），
display: grid兼容性和性能都比 flex 可靠得多
flex 的坑不在语法难，而在隐式行为太强：比如 flex: 1 默默把 flex-basis 设成 0%，align-items 对单个项目完全不起作用——这些细节不盯住，调试时花半天也找不到根因。 
