CSS Flex 弹性布局入门指南

一、为什么用 Flex

传统布局靠 float、position、margin 拼，居中、等分、自适应宽度都很麻烦，移动端多屏适配尤其痛苦。Flex 弹性布局把容器当成一个弹性盒子，子元素沿主轴排列，自动分配空间，几行代码就能实现水平垂直居中、等分列、两端对齐，是现代前端布局的首选。

二、两个核心概念

• 容器（flex container）：给父元素设 display: flex，它就是弹性容器；
• 项目（flex item）：容器里的直接子元素，按主轴排列。

主轴由 flex-direction 决定，交叉轴与之垂直。

三、容器常用属性

.box {
  display: flex;
  flex-direction: row;        /* 主轴方向：水平从左到右 */
  justify-content: center;    /* 主轴对齐：居中 */
  align-items: center;        /* 交叉轴对齐：垂直居中 */
  flex-wrap: wrap;            /* 超出换行 */
  gap: 12px;                  /* 项目间距 */
}

• justify-content：主轴对齐，可选 flex-start、center、flex-end、space-between（两端贴边、中间均分）、space-around；
• align-items：交叉轴对齐，可选 stretch、center、flex-start、flex-end；
• flex-wrap：nowrap 不换行，wrap 换行。

四、项目常用属性

.item {
  flex: 1;                 /* 等比占据剩余空间 */
  flex-grow: 1;            /* 放大比例 */
  flex-shrink: 0;          /* 不缩小 */
  align-self: flex-end;    /* 单独覆盖交叉轴对齐 */
}

flex: 1 是开发最常用简写，让所有项目平分剩余宽度，卡片列表、导航项等分就靠它。flex-shrink: 0 防止内容被挤压变形。

五、经典场景：水平垂直居中

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

一行 flex 三属性搞定居中，比 margin 负值、absolute 定位简洁可靠。

六、常见误区

1. 给容器设了 flex 却在子元素上用 float，float 失效；
2. 忘记 flex-wrap: wrap，屏幕变窄项目挤成一行不换行；
3. flex: 1 和固定宽度冲突，导致布局错乱；
4. 混淆 justify-content（主轴）和 align-items（交叉轴），居中方向写反；
5. 嵌套 flex 时内层项目继承规则，尺寸没控制好溢出。

七、总结

Flex 用容器属性控制主轴排列、交叉轴对齐和换行，用项目属性 flex 分配剩余空间。掌握 flex 方向、justify-content、align-items、flex:1 这几个核心，配合 gap 设间距，就能快速写出自适应的导航、卡片、居中布局，是前端必会的基础能力。