HTML5弹性布局flexbox怎么用_容器与项目属性的基础设置详解【方法】

Flexbox 的核心在于容器与项目属性的配对理解：flex-direction 决定主轴方向，进而影响 justify-content（主轴对齐）和 align-items（交叉轴对齐）的行为；flex-wrap 默认 nowrap，需显式设 wrap 才换行，此时 align-content 才生效；flex 是 shorthand，顺序为 flex-grow | flex-shrink | flex-basis，常见误写如 flex: 1 0 实为 flex: 1 0 0；布局需兼顾 display: flex、主轴判断与属性协同，否则易翻车。

Flexbox 不是“用不用”的问题，而是“怎么设才不翻车”的问题——容器属性和项目属性必须配对理解，单独调一个往往没效果，甚至起反作用。

flex-direction 控制主轴方向，但会影响 justify-content 和 align-items 的行为

flex-direction 决定主轴朝哪走，它一变，justify-content（主轴对齐）和 align-items（交叉轴对齐）的“上下左右”含义就跟着变。比如：flex-direction: column 时，justify-content: flex-start 是顶对齐，不是左对齐。

• row（默认）：主轴水平向右，justify-content 控制左右，align-items 控制上下
• column：主轴垂直向下，justify-content 控制上下，align-items 控制左右
• 别硬记“左/上”，盯住主轴方向，再看“justify = 主轴，align = 交叉轴”这个口诀

flex-wrap 默认不换行，内容溢出也不自动折行

很多人以为子项超出容器就会像文本一样自动换行，其实 flex-wrap 默认值是 nowrap，所有项目死扛在一行，宽度被压缩甚至溢出可视区。

• 要换行，必须显式设 flex-wrap: wrap 或 wrap-reverse
• 换行后，align-content 才生效（控制多行之间的间距），单行时它完全无效
• 移动端常见坑：盒子设了 width: 100% + flex: 0 0 auto，但忘了 flex-wrap，结果内容横向滚动

flex 属性是 shorthand，三个值顺序不能错：flex-grow | flex-shrink | flex-basis

flex 看似简单，但三个参数位置固定、语义强耦合。写成 flex: 1 是 flex: 1 1 0，而 flex: 1 0 会解析为 flex: 1 0 0（即不收缩、基准为 0），不是“放大但不设收缩比”。

立即学习“前端免费学习笔记（深入）”；

• flex: 0 0 auto：不放大、不缩小、按内容宽高（最安全的初始值）
• flex: 1：等价于 flex: 1 1 0，常用于填满剩余空间
• flex: 2 和 flex: 1 同行时，前者占剩余空间的 2/3，后者占 1/3
• 单独设 flex-grow 而忽略 flex-shrink 可能导致缩放异常（尤其在小屏下）

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.item {
flex: 0 0 calc(50% - 8px); / 两列布局，预留 gap 空间 /
}
@media (max-width: 600px) {
.item {
flex: 0 0 100%; / 小屏单列 /
}
}

Flexbox 的复杂点不在属性多，而在“容器定义主轴，项目响应主轴”这个双向依赖关系。漏掉 display: flex、误判主轴方向、或把 align-items 当成“垂直居中万能解”，是最常卡住的地方。