display: flex 最直接生效只需父容器设 display: flex，子元素自动水平左对齐排列；需注意 flex-wrap 换行、IE 兼容性及 align-items/align-content 区分。
用 display: flex 最直接生效
只要父容器加一行 display: flex，子元素默认就水平左对齐排列，不用浮动、不用 inline-block、也不用写多余的 float: left 或 vertical-align。
常见错误是只给子元素设 display: inline-block 却忘了清除换行符带来的空隙，或者用 float 后忘记清浮——这些都比 display: flex 多出至少 2–3 个需要同步处理的点。
-
display: flex必须写在父容器上，不是子元素 - 子元素无需额外设置
display，它们自动成为 flex item - 如果子元素是 这类块级元素，原来会独占一行，加了 flex 后立刻“放弃块级特性”，按 flex 规则排列
justify-content控制水平对齐方式默认是
justify-content: flex-start（左对齐），但你很可能需要居中、右对齐或两端对齐——全靠这个属性。注意它只作用于主轴（flex-direction 默认是
row，所以主轴就是水平方向）；别和align-items混，后者管垂直方向。立即学习“前端免费学习笔记（深入）”；
-
justify-content: center—— 水平居中（最常用） -
justify-content: flex-end—— 右对齐 -
justify-content: space-between—— 首尾贴边，中间等距 -
justify-content: space-evenly—— 所有间隙（含首尾外侧）完全相等
别漏掉
flex-wrap: wrap应对内容溢出默认情况下，flex 容器不允许换行，所有子元素会被强行压缩在同一行，可能造成溢出或缩小变形。如果子元素数量不确定，或宽度不固定，务必考虑是否要换行。
比如导航栏菜单项太多时，
flex-wrap: nowrap（默认）会让菜单横向滚动或撑破容器；而flex-wrap: wrap能让它自然折行。- 加
flex-wrap: wrap后，justify-content仍只作用于当前行，不是整块区域 - 如果想让折行后的多行整体居中，得配合
align-content: center（注意不是align-items） - 移动端小屏下尤其容易触发换行，建议在响应式断点里显式控制
flex-wrap
兼容性提醒：IE10/11 对 flex 的支持有坑
如果你必须支持 IE10 或 IE11，
display: flex能用，但部分值行为异常：-
justify-content: space-evenly在 IE 完全不支持，得降级为space-between或用 JS 补充逻辑 -
flex: 1在 IE11 中对min-width: auto处理有问题，可能导致子元素不收缩，需手动加min-width: 0 - IE10 不支持
flex-wrap: wrap-reverse和align-content的多数值
/* IE11 下防止 flex: 1 子项不收缩 */ .item { flex: 1; min-width: 0; }flex 布局的水平排列看似简单，真正踩坑的地方往往在换行行为、IE 兼容细节、以及和
align-items/align-content的混淆——这三个地方不提前确认，上线后容易出现对不齐、折行错位、或者老浏览器直接失效。 -
