Flex容器是设了display: flex或inline-flex的父元素，创建弹性上下文使直接子元素成为Flex项目；注意块级/行内差异、浮动失效、仅直系子元素生效及主轴/交叉轴随flex-direction动态变化。
什么是 Flex 容器？display: flex 一设就生效，但别漏掉关键细节
Flex 容器就是设置了 display: flex 或 display: inline-flex 的父元素。一旦设上，它立刻创建一个弹性格式化上下文，所有直接子元素自动变成 Flex 项目——你不用给子元素加任何 display 声明。
容易踩的坑：
-
display: flex是块级容器（独占一行），而display: inline-flex是行内块级容器（宽度由内容决定，可与文字同行）； - 浮动（
float）、清除（clear）、垂直对齐（vertical-align）在容器上会完全失效； - 孙子元素不会继承 Flex 行为，只有“直接子元素”才算项目，嵌套布局需逐层设
display: flex。
主轴和交叉轴到底怎么分？flex-direction 决定一切
Flex 布局不是靠“上下左右”直觉驱动的，而是靠两个隐形坐标轴：主轴（main axis）和交叉轴（cross axis）。它们始终互相垂直，且方向完全由 flex-direction 控制。
常见错误现象：写了 justify-content: center 却没居中——很可能因为主轴被设成了 column，而你还在按“水平居中”理解它。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row（默认）→ 主轴水平向右，交叉轴垂直向下； -
flex-direction: column→ 主轴垂直向下，交叉轴水平向右； - 此时
justify-content控制的是“主轴方向”的对齐（即垂直方向），align-items控制的是“交叉轴方向”（即水平方向）； - 换言之：
justify-content和align-items的作用会随flex-direction动态翻转，不能死记“justify 是水平、align 是垂直”。
为什么项目没居中？检查 justify-content 和 align-items 的分工
这两个属性是 Flex 对齐的“黄金组合”，但各自管的不是“X 轴/Y 轴”，而是“主轴/交叉轴”。多数居中失败，是因为混淆了它们的管辖范围。
典型使用场景：让一个按钮在卡片里水平 + 垂直居中。
.card {
display: flex;
justify-content: center; /* 主轴居中：若 flex-direction 是 row → 水平居中 */
align-items: center; /* 交叉轴居中：若 flex-direction 是 row → 垂直居中 */
}-
justify-content只影响主轴上的空间分布（flex-start/center/space-between等）； -
align-items默认值是stretch，会让项目拉伸填满交叉轴高度（常导致意外撑高）； - 如果容器没设高度，
align-items: center可能“看起来没效果”——因为交叉轴长度为 0，必须显式设height或min-height才有空间可居中。
项目不换行？flex-wrap: wrap 不是默认行为
Flex 容器默认是 flex-wrap: nowrap，意味着所有项目强行挤在一行，哪怕溢出容器也不折行。这不是 bug，是设计使然——Flex 初始定位就是“一维单行流”。
实际开发中，导航栏、标签栏、响应式卡片列表几乎都需换行支持。
- 加
flex-wrap: wrap后，项目超出主轴长度时自动换到下一行（或下一列）； - 换行后，
align-content才开始生效（控制多行在交叉轴上的分布，如flex-start/center/space-between）； - 别用
flex-flow: row wrap替代完整写法，除非你确认不需要单独覆盖flex-direction或flex-wrap。
Flex 布局真正的复杂点不在属性数量，而在“轴系思维”——它要求你先问自己：此刻主轴朝哪？剩余空间在哪条轴上？对齐目标落在哪条轴？很多人卡住，不是不会写代码，而是忘了切换坐标系。
