display: flex 生成块级容器独占一行，display: inline-flex 生成行内容器可并排显示；前者撑满父宽，后者宽由内容决定；IE10–11 对后者支持差；justify-content 按主轴方向对齐，主轴由 flex-direction 决定。
flex 容器的 display: flex 和 display: inline-flex 区别
关键区别在于容器本身的显示行为：display: flex 生成块级弹性容器，独占一行；display: inline-flex 生成行内弹性容器，可与其他行内元素并排显示。实际中误用 inline-flex 却期望它撑满父容器宽度，常导致对齐“失效”——因为它的宽度默认由内容决定，而非父容器。
- 若需水平居中一组按钮且不换行，用
inline-flex+ 父元素text-align: center - 若需整个区域铺满、内部子项垂直居中，必须用
display: flex并设置容器高度（如min-height: 100vh） - IE10–11 对
inline-flex支持不稳定，有兼容需求时优先选flex
justify-content 控制主轴对齐，但主轴方向由 flex-direction 决定
很多人以为 justify-content: center 总是“水平居中”，其实它只对主轴生效。当 flex-direction: column 时，主轴变成垂直方向，justify-content 就控制的是上下对齐，此时想水平居中得靠 align-items。
-
flex-direction: row（默认）→ 主轴水平 →justify-content管左右，align-items管上下 -
flex-direction: column→ 主轴垂直 →justify-content管上下，align-items管左右 -
justify-content: space-between在只有两个子项时很实用，但若子项动态增减，中间空隙会剧烈变化，慎用于列表场景
align-items 与 align-self 的优先级和常见陷阱
align-items 是容器属性，统一设置所有子项在交叉轴上的对齐方式；align-self 是子项属性，可单独覆盖。但注意：align-self 对文档流中非弹性子项（比如未设 display: flex 的直接子元素）无效。
- 容器设了
align-items: flex-start，但某个按钮需要底部对齐？给它加align-self: flex-end -
align-items: center在容器无明确高度时可能“没反应”——因为交叉轴尺寸未定义，浏览器无法计算居中位置 - 使用
align-self: stretch（默认值）时，子项会拉伸填满交叉轴，但如果子项本身设置了height或min-height，拉伸会被抑制
垂直居中一个未知高度的元素：为什么 margin: auto 在 flex 中有效
在传统布局中，margin: auto 垂直居中需要绝对定位+宽高已知；但在 flex 容器中，只要容器设了 display: flex、justify-content: center 和 align-items: center，子项即使没有宽高，也能精准居中。这是因为 flex 把 margin: auto 解释为“在当前轴上吸收剩余空间”，而 justify-content 和 align-items 已经定义了主轴与交叉轴的对齐逻辑。
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .item { / 不需要 width/height，也不需要 margin / }
这个组合看似简单，但容易被忽略的前提是：容器必须有可计算的交叉轴尺寸（比如 min-height 或 height），否则 align-items: center 没有参考基准。