17370845950

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 布局真正的复杂点不在属性数量，而在“轴系思维”——它要求你先问自己：此刻主轴朝哪？剩余空间在哪条轴上？对齐目标落在哪条轴？很多人卡住，不是不会写代码，而是忘了切换坐标系。