css flexbox布局基础_掌握flex容器与项目的基本概念_技术教程

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。