Flex布局：轻松掌握弹性盒子

原创已于 2025-10-24 14:38:57 修改 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-10-17 15:29:24 首次发布

10 篇文章

订阅专栏

Flex布局（弹性盒子布局）是一种CSS3的布局模式，旨在提供更高效的容器内项目排列、对齐和分配空间的方式，尤其适用于动态或未知尺寸的布局场景。核心思想是让容器能够根据可用空间自动调整子元素的大小和位置。

display: flex
将元素设置为 Flex 容器，其子元素自动成为 Flex 项目。

.container {
  display: flex;
}

flex-direction
定义主轴方向，决定项目的排列方式。
可选值：

.container {
  flex-direction: row;
}

flex-wrap
控制项目是否换行。
可选值：

.container {
  flex-wrap: wrap;
}

justify-content
定义项目在主轴上的对齐方式。
可选值：

.container {
  justify-content: center;
}

align-items
定义项目在交叉轴上的对齐方式。
可选值：

.container {
  align-items: center;
}

align-content
定义多根轴线的对齐方式（适用于多行 Flex 容器）。
可选值：

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

order
控制项目排列顺序，数值越小越靠前，默认为0。

.item {
  order: 2;
}

flex-grow
定义项目的放大比例，默认为0（不放大）。若所有项目为1，则等分剩余空间；若某项目为2，则占据空间为其他项目的两倍。

.item {
  flex-grow: 1;
}

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

.item {
  flex-shrink: 0;
}

flex-basis
定义项目在分配多余空间前的初始尺寸，默认为auto（项目原大小）。可设为固定值（如200px）或百分比。

.item {
  flex-basis: 100px;
}

flex

简写属性，格式为flex-grow flex-shrink flex-basis，默认值0 1 auto。常用简写：

.item {
  flex: 1 0 auto;
}

align-self
允许单个项目与其他项目采用不同的对齐方式。

.item {
  align-self: flex-end;
}

水平居中
通过justify-content和align-items实现水平和垂直居中。

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

等分布局
利用flex-grow让项目平分剩余空间。

.item {
  flex-grow: 1;
}

圣杯布局
结合flex-direction和order实现复杂布局。

.container {
  display: flex;
  flex-direction: column;
}
.header {
  order: -1;
}
.content {
  flex: 1;
}

Flex 布局提供了强大的灵活性，适用于响应式设计和复杂布局需求。通过合理组合容器和项目的属性，可以实现多种布局效果。

等高分栏 用align-items: stretch（默认值）让项目高度与容器一致。

动态间距 justify-content: space-between实现两端对齐，gap属性设置项目间距。

移动端适配 结合媒体查询调整flex-direction为column：

@media (max-width: 768px) {
  .container { flex-direction: column; }
}