Flexbox 弹性布局：一维对齐与空间分配

FreeGuideOnline 最新 2026-06-15

Flexbox 弹性布局：一维对齐与空间分配

Flexbox（弹性盒子）是 CSS 中专门为一维布局设计的强大模块。它可以轻松实现元素在行或列方向上的对齐、分布和排序，即使容器或项目尺寸未知或动态变化也能完美工作。本教程将带你从零掌握 Flexbox。

启用弹性容器

要使用 Flexbox，只需将容器的 display 属性设为 flex 或 inline-flex。

.container {
  display: flex;
}

此时，容器变为弹性容器，其直接子元素自动成为弹性项目，并按主轴方向排列。

flex：生成块级弹性容器。
inline-flex：生成行内级弹性容器。

主轴与交叉轴

理解两根轴线是掌握 Flexbox 的关键：

主轴 (Main Axis)：弹性项目排列的主方向，由 flex-direction 定义。
交叉轴 (Cross Axis)：垂直于主轴的方向。

所有对齐属性都基于这两根轴。

改变主轴方向

通过 flex-direction 设置主轴方向：

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

row (默认)：主轴水平，起点在左。
row-reverse：主轴水平，起点在右。
column：主轴垂直，起点在上。
column-reverse：主轴垂直，起点在下。

当设置 column 时，主轴变为垂直方向，常用于构建纵向堆叠布局。

容器上的对齐属性

这些属性控制项目在主轴和交叉轴上的整体对齐与分布。

主轴对齐：justify-content

控制项目在主轴上的对齐方式及剩余空间分配。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start (默认)：项目向主轴起点靠拢。
flex-end：项目向主轴终点靠拢。
center：项目居中。
space-between：项目两端对齐，间隔相等。
space-around：每个项目两侧间隔相等，所以项目间间隔是项目与边框间隔的两倍。
space-evenly：所有间隔完全相等（包括边框到项目的间隔）。

交叉轴对齐：align-items

控制所有项目在交叉轴上的对齐方式。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch (默认)：如果项目未设置高度或为 auto，将拉伸至容器高度。
flex-start：向交叉轴起点对齐。
flex-end：向交叉轴终点对齐。
center：在交叉轴上居中。
baseline：按项目的文本基线对齐。

多行对齐：align-content

仅当容器有多行（即 flex-wrap: wrap 且存在换行）时生效，控制行在交叉轴上的分布与对齐。

.container {
  flex-wrap: wrap;
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

取值与 justify-content 类似，但作用于行组。

弹性项目的换行与排序

flex-wrap：控制是否换行

默认情况下，所有项目强挤在一行。设置 flex-wrap 允许项目换行。

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap (默认)：不换行，项目可能缩小。
wrap：正常换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

通常与 align-content 配合使用。

order：改变项目排列顺序

所有弹性项目的默认 order 为 0，可通过整数值重新排序（越大越靠后）。

.item {
  order: 1; /* 默认 0，数值越小越靠前 */
}

仅改变视觉顺序，不影响 DOM 结构，谨慎用于可访问性。

弹性项目的伸缩与尺寸

这是让布局“弹性”的核心。

flex-grow：增长比例

定义项目在主轴上的放大能力。默认 0，表示不放大。

.item {
  flex-grow: 1; /* 所有项目等分剩余空间 */
}

如果某项目设 flex-grow: 2，它将分得双倍剩余空间。

flex-shrink：收缩比例

定义项目的缩小能力。默认 1，表示空间不足时项目会等比缩小。

.item {
  flex-shrink: 0; /* 该项目无论如何不缩小 */
}

设置为 0 可防止关键内容被挤压。

flex-basis：基准尺寸

定义项目在分配多余空间之前的初始尺寸。默认 auto，即使用项目自身宽度。

.item {
  flex-basis: 200px; /* 基准为200px */
}

简写属性 flex

推荐使用简写 flex 统一设置 grow、shrink、basis。

.item {
  flex: 1 1 0%; /* 常见平均值：可伸缩，基准为0 */
  /* 等价于 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

常用值：

flex: 1：均分可用空间。
flex: initial：即 0 1 auto，不放大但可缩小。
flex: auto：即 1 1 auto，既能放大也能缩小。
flex: none：即 0 0 auto，完全刚性，不伸缩。

项目级交叉轴对齐：align-self

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

默认 auto 继承容器的 align-items。

典型布局场景速查

水平居中与垂直居中

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

左侧标题右侧操作栏

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

均匀分布卡片

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 推荐使用gap设置间距 */
}
.card {
  flex: 1 1 250px; /* 最小250px，自动伸缩并换行 */
}

粘性页脚

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1;
}

常见误区与技巧

记住 Flexbox 是一维系统，对于复杂二维网格，请使用 CSS Grid。
合理使用 gap 属性代替外边距，代码更简洁。
flex-basis 与 width/height 的区别：flex-basis 在主轴方向上生效，且优先级高于宽度设置。
使用 auto margins 可实现独特的对齐效果。例如，对项目设 margin-left: auto 会将其推至最右。

.item:last-child {
  margin-left: auto; /* 将最后一个项目挤到最右侧 */
}

Flexbox 是构建现代 Web 界面的基石，熟练掌握其轴对齐与空间分配原理，能轻松应对绝大多数布局需求。建议动手实践每个属性，体会弹性之美。