CSS Flexbox 布局指南

CSS Flexbox 布局指南

Flexbox 简介

Flexbox（Flexible Box Layout Module）是 CSS3 引入的一种一维布局模型，旨在为容器的子元素提供更高效的排列、对齐和空间分配方式，即使子元素尺寸未知或动态变化也能灵活应对。

核心优势：

• 摆脱传统浮动（float）和定位的繁琐 hack
• 轻松实现垂直居中、等高等宽等复杂布局
• 支持顺序重排（不改变 DOM 结构）
• 对响应式设计友好

核心概念：主轴与交叉轴

Flex 容器中存在两条轴：

• 主轴（main axis） ：由 flex-direction 决定，项目沿主轴排列。
• 交叉轴（cross axis） ：垂直于主轴的方向。
• 主轴起点/终点：main-start / main-end
• 交叉轴起点/终点：cross-start / cross-end
• 项目占据的主轴尺寸：main size
• 项目占据的交叉轴尺寸：cross size

容器属性

首先将父容器设为 Flex 容器：

.container {
  display: flex; /* 或 inline-flex */
}

flex-direction

定义主轴方向，决定项目的排列顺序。

值	含义
row（默认）	水平从左到右
row-reverse	水平从右到左
column	垂直从上到下
column-reverse	垂直从下到上

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

控制项目是否换行。

值	含义
nowrap（默认）	不换行，压缩项目尺寸
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

.container {
  flex-wrap: wrap;
}

flex-flow

flex-direction 和 flex-wrap 的简写，默认值为 row nowrap。

.container {
  flex-flow: column wrap;
}

justify-content

定义项目在主轴上的对齐方式以及空间分配。

值	表现
flex-start（默认）	紧靠主轴起点
flex-end	紧靠主轴终点
center	居中对齐
space-between	两端对齐，项目间隔相等
space-around	每个项目两侧间隔相等（边缘间隔为中间一半）
space-evenly	所有间隔完全相等（包括边缘）

.container {
  justify-content: space-between;
}

align-items

定义项目在交叉轴上的对齐方式（单行时有效）。

值	表现
stretch（默认）	拉伸填满容器交叉轴尺寸
flex-start	交叉轴起点对齐
flex-end	交叉轴终点对齐
center	交叉轴居中对齐
baseline	以项目第一行文字基线对齐

.container {
  align-items: center;
}

align-content

定义多行项目在交叉轴上的对齐方式（需 flex-wrap: wrap 且容器有额外高度）。

值	作用
stretch（默认）	拉伸行占满剩余空间
flex-start	行紧靠交叉轴起点
flex-end	行紧靠交叉轴终点
center	行在交叉轴居中
space-between	行两端对齐
space-around	行两侧间隔相等

.container {
  flex-wrap: wrap;
  align-content: center;
}

gap

用于设置项目之间的间距，分别控制行间距和列间距。相比使用 margin，gap 更简洁且不会破坏外边距合并逻辑。

属性	作用
gap	同时设置行间距和列间距
row-gap	单独设置行间距（仅当换行时）
column-gap	单独设置列间距

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;        /* 行间距和列间距均为 20px */
  row-gap: 30px;    /* 覆盖行间距 */
  column-gap: 15px; /* 覆盖列间距 */
}

注意：gap 在 Flexbox 中从 Chromium 84、Firefox 63、Safari 14.1 开始全面支持。IE 全系列不支持，如需兼容 IE 请使用 margin 方案。

项目属性

以下属性作用于 Flex 容器的直接子元素。

order

定义项目的排列顺序，数值越小越靠前，默认为 0。支持负值。

.item {
  order: 2; /* 默认为 0，数值小的在前 */
}

flex-grow

定义项目的放大比例，默认为 0（即存在剩余空间也不放大）。若所有项目 flex-grow: 1，则等分剩余空间。

.item {
  flex-grow: 1; /* 占据剩余空间 */
}

flex-shrink

定义项目的缩小比例，默认为 1（空间不足时会缩小）。设为 0 则禁止缩小。

.item {
  flex-shrink: 0; /* 不允许缩小，可能溢出 */
}

flex-basis

定义项目在分配多余空间之前的主轴初始尺寸。可以是长度值（如 200px）或关键字 auto（默认，参考自身 width/height）。

关键区别：

• flex-basis: auto：项目尺寸基于自身的 width / height 或内容宽度。
• flex-basis: 0%（或 0px）：项目尺寸被忽略，所有项目从“零起点”开始分配剩余空间。

实际开发中，想要完全等分剩余空间时通常使用 flex: 1（其 flex-basis 为 0%）；想要基于内容宽度再扩展时使用 flex: auto（其 flex-basis 为 auto）。

.item {
  flex-basis: 150px;
}

flex 简写

flex: flex-grow flex-shrink flex-basis（默认 0 1 auto）。

常用快捷值及其展开：

快捷值	展开值	行为说明
flex: 1	1 1 0%	等分剩余空间，项目原始尺寸不参与分配（从 0 开始）
flex: auto	1 1 auto	基于内容宽度分配剩余空间，内容越长得到越多
flex: none	0 0 auto	固定尺寸，不伸缩（类似 display: inline-block）
flex: 0 1 auto	默认值	可缩小但不可放大，基于内容宽度

.item {
  flex: 1;   /* 最常用：等分剩余空间 */
}

实际效果对比示例（容器宽度 600px，三个项目）：

• 若三个项目均 flex: 1 → 每个项目宽度 200px（忽略内容宽度）。
• 若三个项目均 flex: auto，且内容宽度分别为 50px、100px、150px → 先预留 300px，剩余 300px 等分给三个项目（各加 100px），最终宽度分别为 150px、200px、250px。

align-self

允许单个项目覆盖容器的 align-items 设置。

.item {
  align-self: center; /* 可选值同 align-items */
}

浏览器兼容性

Flexbox 在现代浏览器中支持良好：

• Chrome 29+
• Firefox 28+
• Safari 9+（部分旧前缀 -webkit-）
• Edge 12+
• IE 10/11 部分支持（需 -ms- 前缀且存在较多 bug）

对于 IE 10/11：

• 需要使用 display: -ms-flexbox
• 不支持 flex 简写中的 gap 属性（请用 margin 替代）
• flex-basis: auto 表现异常，建议用 0% 等
• flex 简写建议避免使用 auto 关键字，直接写展开值

推荐使用 Autoprefixer 自动添加前缀，确保最大兼容性。