【前端开发之CSS】（六）CSS 弹性布局（Flex）完全指南：从入门到精通，搞定所有布局需求

_OP_CHEN

发布于 2026-01-30 10:09:20

文章被收录于专栏：C++C++

前言

在 CSS 布局的江湖中，弹性布局（Flexbox）绝对是 “武林高手” 般的存在。它彻底颠覆了传统的浮动、定位布局方式，以简洁的语法、强大的灵活性，轻松搞定从简单居中到复杂响应式布局的各种需求，成为现代前端开发的首选布局方案。如果你还在为浮动塌陷、垂直居中发愁，如果你想写出更简洁、更易维护的布局代码，那么这篇弹性布局完全指南就是为你量身打造的！本文将从初体验到核心概念，再到常用属性和实战案例，带你全方位解锁 Flex 布局的奥秘，让布局从此变得简单高效。下面就让我们正式开始吧！

一、弹性布局初体验：为什么 Flex 如此强大？

在学习 Flex 布局之前，我们先通过一个简单的案例，感受一下它的强大之处。传统布局中，要让多个元素在容器中均匀分布、垂直居中，需要用到浮动、定位等多种技巧，还容易出现兼容性问题。而 Flex 布局只需几行代码就能轻松实现。

1.1 一个简单的 Flex 案例

假设我们有一个容器，内部包含三个 span 元素，要求这三个元素在容器中水平均匀分布、垂直居中，并且每个元素有固定的宽高。

传统布局的痛点

如果使用传统布局，我们可能需要给 span 设置display: inline-block，再通过浮动或定位调整位置，还要处理元素之间的间距，代码繁琐且容易出问题：

/* 传统布局实现（繁琐且易出问题） */
.container {
  width: 100%;
  height: 150px;
  background-color: red;
  text-align: center; /* 水平居中 */
  line-height: 150px; /* 垂直居中（仅对单行文本有效） */
}

.container span {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 20px; /* 手动设置间距 */
  vertical-align: middle; /* 垂直居中调整 */
}

这种方式不仅代码繁琐，而且当元素数量变化或容器尺寸改变时，间距需要重新计算，维护成本高。

Flex 布局的优雅实现

使用 Flex 布局，只需给父容器添加display: flex，再配合两个属性，就能轻松实现需求：

/* Flex布局实现（简洁高效） */
.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex; /* 开启Flex布局 */
  justify-content: space-around; /* 主轴上均匀分布 */
  align-items: center; /* 侧轴上垂直居中 */
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
}

HTML 结构：

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

效果：三个绿色的方块在红色容器中水平均匀分布、垂直居中，无论容器尺寸如何变化，元素都会自动调整位置，代码简洁且维护方便。

1.2 Flex 布局的核心优势

通过上面的案例，我们可以感受到 Flex 布局的以下核心优势：

简洁高效：只需几行代码就能实现复杂的布局需求，无需浮动、定位等繁琐技巧。
灵活适配：元素会自动适应容器的尺寸变化，轻松实现响应式布局。
完美居中：轻松实现水平、垂直居中，解决传统布局中垂直居中的痛点。
易于维护：布局结构清晰，修改时只需调整相关属性，无需重构代码。

1.3 初体验总结

Flex 布局的核心思想是：给父容器添加display: flex，将其变为弹性容器，然后通过控制弹性容器的属性，来管理内部弹性项目的排列方式、间距、对齐方式等。弹性项目会自动适应弹性容器的布局规则，无需手动调整位置和尺寸，极大地简化了布局流程。

二、Flex 布局基本概念：搞懂这几个术语，才算入门

要熟练使用 Flex 布局，首先需要理解几个核心术语。Flex 布局的结构主要由 “弹性容器” 和 “弹性项目” 组成，还有 “主轴” 和 “侧轴” 两个重要的方向概念。

2.1 核心术语解析

1. 弹性容器（Flex Container）

定义：给元素设置display: flex或display: inline-flex后，该元素就成为了弹性容器。
作用：作为弹性项目的父容器，通过设置弹性容器的属性，控制内部弹性项目的布局。
注意：弹性容器会生成一个新的 BFC（块级格式化上下文），内部元素的浮动、clear、vertical-align 等属性会失效。

2. 弹性项目（Flex Item）

定义：弹性容器的直接子元素（不包括孙子元素），自动成为弹性项目。
作用：弹性布局的布局对象，会根据弹性容器的属性自动调整位置和尺寸。
注意：弹性项目默认是行内块元素，无需设置display: inline-block就能设置宽高，且不会独占一行。

3. 主轴（Main Axis）

定义：弹性项目排列的主要方向，是 Flex 布局的核心方向。
默认方向：水平向右（从左到右），这是 Flex 布局的默认主轴方向。
可修改：通过flex-direction属性可以修改主轴方向（如垂直向下、水平向左等）。
关键概念：
- 主轴起点（Main Start）：弹性项目开始排列的位置。
- 主轴终点（Main End）：弹性项目排列结束的位置。
- 主轴长度（Main Size）：弹性项目在主轴方向上的尺寸（宽度或高度）。

4. 侧轴（Cross Axis）

定义：与主轴垂直的方向，是弹性项目在垂直于主轴方向上的排列方向。
方向关系：侧轴方向由主轴方向决定，始终与主轴垂直。
- 当主轴水平时，侧轴垂直（从上到下）。
- 当主轴垂直时，侧轴水平（从左到右）。
关键概念：
- 侧轴起点（Cross Start）：弹性项目在侧轴方向上开始排列的位置。
- 侧轴终点（Cross End）：弹性项目在侧轴方向上排列结束的位置。
- 侧轴长度（Cross Size）：弹性项目在侧轴方向上的尺寸（高度或宽度）。

2.2 可视化理解 Flex 结构

为了让大家更直观地理解这些概念，我们用一张图来展示 Flex 布局的结构：

弹性容器包裹着三个弹性项目。

主轴方向为水平向右，弹性项目从主轴起点向主轴终点排列。
侧轴方向为垂直向下，弹性项目在侧轴方向上的位置由侧轴相关属性控制。

2.3 重要提醒：Flex 布局的兼容性

Flex 布局是 CSS3 新增的布局方式，兼容性非常好，支持所有现代浏览器（Chrome、Firefox、Safari、Edge 等），IE11 及以上也部分支持（需注意部分属性的兼容性差异）。在实际开发中，无需担心兼容性问题，可放心使用。

三、Flex 容器的常用属性：掌控布局的核心

弹性容器的属性是 Flex 布局的核心，通过设置这些属性，可以控制弹性项目的排列方向、对齐方式、间距、换行等。常用的弹性容器属性有以下 6 个：

flex-direction：设置主轴方向（核心属性）。
justify-content：设置主轴上弹性项目的对齐方式（核心属性）。
align-items：设置侧轴上弹性项目的对齐方式（核心属性）。
flex-wrap：设置弹性项目是否换行（核心属性）。
align-content：设置多行车弹性项目在侧轴上的对齐方式（补充属性）。
flex-flow：flex-direction和flex-wrap的简写属性（常用属性）。

下面我们逐一详细讲解这些属性的用法、取值和示例。

3.1 flex-direction：设置主轴方向（布局的基础）

flex-direction属性用于定义主轴的方向，决定了弹性项目的排列方向，是 Flex 布局的基础属性。

3.1.1 语法

flex-direction: row | row-reverse | column | column-reverse;

3.1.2 取值详解

取值	主轴方向	弹性项目排列方向	侧轴方向	适用场景
row（默认）	水平向右	从左到右	垂直向下	横向布局（如导航栏、卡片布局）
row-reverse	水平向左	从右到左	垂直向下	反向横向布局（如右侧导航）
column	垂直向下	从上到下	水平向右	纵向布局（如移动端页面、列表）
column-reverse	垂直向上	从下到上	水平向右	反向纵向布局（如特殊展示效果）

3.1.3 示例演示

示例 1：默认值 row（水平向右）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  flex-direction: row; /* 默认值，可省略 */
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
}

效果：弹性项目从左到右水平排列，主轴为水平向右。

示例 2：row-reverse（水平向左）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
}

效果：弹性项目从右到左水平排列，主轴为水平向左。

示例 3：column（垂直向下）

.container {
  width: 300px;
  height: 400px;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px 0;
}

效果：弹性项目从上到下垂直排列，主轴为垂直向下。

示例 4：column-reverse（垂直向上）

.container {
  width: 300px;
  height: 400px;
  background-color: red;
  display: flex;
  flex-direction: column-reverse;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 10px 0;
}

效果：弹性项目从下到上垂直排列，主轴为垂直向上。

3.1.3 实战场景：移动端垂直布局

在移动端开发中，页面通常采用垂直布局，使用flex-direction: column可以轻松实现：

.mobile-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  height: 60px;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  flex: 1; /* 占满剩余空间 */
  background-color: #f5f5f5;
  padding: 20px;
}

.footer {
  height: 50px;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML 结构：

<div class="mobile-page">
  <div class="header">页头</div>
  <div class="content">主内容区（占满剩余空间）</div>
  <div class="footer">页脚</div>
</div>

效果：页头和页脚固定高度，主内容区占满页面剩余空间，完美适配移动端垂直布局需求。

3.2 justify-content：主轴上的对齐方式（核心属性）

justify-content属性用于设置弹性项目在主轴方向上的对齐方式，是控制水平或垂直排列位置的核心属性，配合flex-direction可以实现各种对齐效果。

3.2.1 语法

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

3.2.2 取值详解（以主轴水平向右为例）

取值	对齐方式描述	视觉效果	适用场景
flex-start（默认）	弹性项目靠主轴起点对齐	左对齐（主轴水平时）	默认布局、左对齐列表
flex-end	弹性项目靠主轴终点对齐	右对齐（主轴水平时）	右对齐布局、右侧操作栏
center	弹性项目在主轴上居中对齐	水平居中（主轴水平时）	居中展示、弹窗内容
space-between	弹性项目均匀分布，首尾贴边	两端对齐，中间间距相等	导航栏、均匀分布的卡片
space-around	弹性项目均匀分布，首尾有间距	每个项目两侧间距相等，首尾间距为中间间距的一半	均匀分布且需要留白的布局
space-evenly	弹性项目均匀分布，所有间距相等	首尾间距与中间间距完全相等	严格均匀分布的布局（如网格）

3.2.3 示例演示（主轴水平向右，flex-direction: row）

示例 1：flex-start（默认，左对齐）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: flex-start; /* 默认值 */
  align-items: center;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
}

效果：弹性项目靠容器左侧对齐，从左到右排列。

示例 2：flex-end（右对齐）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
}

效果：弹性项目靠容器右侧对齐，从右到左排列。

示例 3：center（水平居中）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
}

效果：弹性项目在容器中水平居中排列，是最常用的居中方式之一。

示例 4：space-between（两端对齐，中间均匀分布）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px; /* 容器左右留白 */
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
}

效果：第一个项目靠容器左侧，最后一个项目靠容器右侧，中间项目均匀分布，间距相等，适合导航栏布局。

示例 5：space-around（均匀分布，首尾有间距）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
}

效果：每个项目两侧的间距相等，首尾项目与容器边缘的间距为中间项目间距的一半，布局更宽松。

示例 6：space-evenly（所有间距相等）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
}

效果：首尾项目与容器边缘的间距和中间项目之间的间距完全相等，布局更均匀、更严谨。

3.2.4 实战场景：导航栏布局

使用justify-content: space-between可以轻松实现导航栏的两端对齐布局：

.navbar {
  width: 100%;
  height: 60px;
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}

.logo {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 20px; /* 项目之间的间距 */
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

.nav-links a:hover {
  color: #ff9900;
}

HTML 结构：

<div class="navbar">
  <div class="logo">LOGO</div>
  <div class="nav-links">
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
  </div>
</div>

效果：LOGO 靠左，导航链接靠右，中间间距自动分配，适配不同屏幕宽度，是导航栏的经典布局方式。

3.3 align-items：侧轴上的对齐方式（核心属性）

align-items属性用于设置弹性项目在侧轴方向上的对齐方式，是控制垂直或水平对齐的核心属性，与justify-content配合使用，可实现弹性项目的完全居中。

3.3.1 语法

align-items: stretch | flex-start | flex-end | center | baseline;

3.3.2 取值详解（以主轴水平向右、侧轴垂直向下为例）

取值	对齐方式描述	视觉效果	适用场景
stretch（默认）	弹性项目在侧轴方向上拉伸至与容器等高（需未设置固定高度）	项目高度等于容器高度	填充式布局、卡片等高
flex-start	弹性项目靠侧轴起点对齐	顶部对齐（侧轴垂直时）	顶部对齐的列表、卡片布局
flex-end	弹性项目靠侧轴终点对齐	底部对齐（侧轴垂直时）	底部对齐的操作栏、按钮组
center	弹性项目在侧轴上居中对齐	垂直居中（侧轴垂直时）	垂直居中展示、弹窗内容
baseline	弹性项目按文字基线对齐	文字基线对齐，项目高度可能不同	文字对齐的布局（如表单标签和输入框）

3.3.3 示例演示（主轴水平向右，侧轴垂直向下）

示例 1：stretch（默认，拉伸对齐）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: stretch; /* 默认值 */
}

.container span {
  width: 100px;
  background-color: green; /* 未设置高度，将拉伸至与容器等高 */
}

效果：弹性项目未设置高度，自动拉伸至与容器高度（150px）相等，适合需要项目等高的布局。

示例 2：flex-start（顶部对齐）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 20px;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
}

效果：弹性项目靠容器顶部对齐，适合顶部对齐的列表布局。

示例 3：flex-end（底部对齐）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding-bottom: 20px;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
}

效果：弹性项目靠容器底部对齐，适合底部对齐的操作栏布局。

示例 4：center（垂直居中）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container span {
  width: 100px;
  height: 100px;
  background-color: green;
}

效果：弹性项目在容器中垂直居中对齐，与justify-content: center配合，可实现完全居中。

示例 5：baseline（基线对齐）

.container {
  width: 100%;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  padding-top: 20px;
}

.container span {
  width: 100px;
  background-color: green;
  color: #fff;
  padding: 10px;
}

.span1 {
  font-size: 24px;
  height: 80px;
}

.span2 {
  font-size: 16px;
  height: 100px;
}

.span3 {
  font-size: 32px;
  height: 60px;
}

效果：三个弹性项目的文字基线对齐，即使项目高度和字体大小不同，文字也能保持对齐，适合表单等需要文字对齐的布局。

3.3.4 实战场景：完全居中布局

justify-content: center和align-items: center配合使用，是实现元素完全居中的最简单方式，无需任何定位技巧。

.modal {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 弹窗整体居中 */
}

.modal-content {
  text-align: center;
}

.modal-title {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.modal-btn {
  padding: 10px 24px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

HTML 结构：

<div class="modal">
  <div class="modal-content">
    <h3 class="modal-title">提示</h3>
    <p>这是一个完全居中的弹窗</p>
    <button class="modal-btn">确定</button>
  </div>
</div>

效果：弹窗内容在弹窗中水平垂直完全居中，弹窗本身在页面中居中，是弹窗布局的经典实现方式。

3.4 flex-wrap：弹性项目的换行设置（核心属性）

默认情况下，弹性项目会在主轴方向上排成一行，即使容器宽度不足，项目也会被压缩以适应容器。flex-wrap属性用于控制弹性项目在容器宽度不足时是否换行，是实现响应式布局的关键属性。

3.4.1 语法

flex-wrap: nowrap | wrap | wrap-reverse;

3.4.2 取值详解

取值	换行方式描述	视觉效果	适用场景
nowrap（默认）	不换行，项目会被压缩以适应容器	所有项目在一行显示，可能被压缩	项目数量少、不需要换行的布局
wrap	换行，项目在主轴方向排满一行后，自动换行到下一行	多行显示，项目不被压缩	响应式布局、项目数量多的布局
wrap-reverse	反向换行，项目排满一行后，向上换行	多行显示，换行方向与 wrap 相反	特殊反向布局需求

3.4.3 示例演示

示例 1：nowrap（默认，不换行）

.container {
  width: 500px;
  height: 200px;
  background-color: red;
  display: flex;
  flex-wrap: nowrap; /* 默认值 */
  justify-content: space-around;
  align-items: center;
}

.container span {
  width: 150px;
  height: 100px;
  background-color: green;
}

效果：容器宽度为 500px，三个项目每个宽 150px，总宽度 450px，小于容器宽度，正常排列；若容器宽度改为 400px，项目会被压缩至约 133px 宽，仍在一行显示。

示例 2：wrap（换行）

.container {
  width: 400px;
  height: 200px;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：容器宽度为 400px，每个项目宽 150px，排满两个项目后（总宽度 300px），第三个项目自动换行到下一行，项目不会被压缩，适合响应式布局。

示例 3：wrap-reverse（反向换行）

.container {
  width: 400px;
  height: 200px;
  background-color: red;
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：项目排满一行后，向上换行，即第三行项目在第一行上方，适合特殊反向布局需求。

3.4.4 实战场景：响应式卡片布局

使用flex-wrap: wrap可以轻松实现响应式卡片布局，在屏幕宽度足够时横向排列，宽度不足时自动换行：

.card-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 项目之间的间距 */
  padding: 20px;
}

.card {
  flex: 1; /* 自适应宽度 */
  min-width: 280px; /* 最小宽度，确保小屏幕不挤压 */
  height: 200px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.card-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.card-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

HTML 结构：

<div class="card-container">
  <div class="card">
    <h3 class="card-title">卡片1</h3>
    <p class="card-desc">这是一张响应式卡片，屏幕宽度足够时横向排列，宽度不足时自动换行。</p>
  </div>
  <div class="card">
    <h3 class="card-title">卡片2</h3>
    <p class="card-desc">这是一张响应式卡片，屏幕宽度足够时横向排列，宽度不足时自动换行。</p>
  </div>
  <div class="card">
    <h3 class="card-title">卡片3</h3>
    <p class="card-desc">这是一张响应式卡片，屏幕宽度足够时横向排列，宽度不足时自动换行。</p>
  </div>
</div>

效果：屏幕宽度足够时，三张卡片横向均匀分布；屏幕宽度小于 768px 时，卡片自动换行，每张卡片占满屏幕宽度，完美适配移动端和桌面端。

3.5 align-content：多行车的侧轴对齐方式（补充属性）

align-content属性用于设置多行车弹性项目在侧轴方向上的对齐方式，仅当弹性项目换行后（flex-wrap: wrap或wrap-reverse）才生效，单行项目时无效果。它与align-items的区别在于：align-items控制单个项目在侧轴上的对齐，align-content控制多行项目整体在侧轴上的对齐。

3.5.1 语法

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

3.5.2 取值详解（以主轴水平向右、侧轴垂直向下为例）

取值	对齐方式描述	视觉效果	适用场景
stretch（默认）	多行车在侧轴方向上拉伸，占满容器高度	每行高度相等，总高度等于容器高度	多行等高布局
flex-start	多行车靠侧轴起点对齐	顶部对齐，多行整体靠上	多行顶部对齐布局
flex-end	多行车靠侧轴终点对齐	底部对齐，多行整体靠下	多行底部对齐布局
center	多行车在侧轴上居中对齐	垂直居中，多行整体居中	多行居中布局
space-between	多行车均匀分布，首尾贴边	两端对齐，中间间距相等	多行均匀分布且首尾贴边
space-around	多行车均匀分布，首尾有间距	每行两侧间距相等，首尾间距为中间间距的一半	多行均匀分布且留白
space-evenly	多行车均匀分布，所有间距相等	首尾间距与中间间距完全相等	多行严格均匀分布

3.5.3 示例演示（flex-wrap: wrap，多行布局）

示例 1：stretch（默认，拉伸对齐）

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: stretch; /* 默认值 */
  padding: 10px 0;
}

.container span {
  width: 150px;
  background-color: green;
  margin: 10px 0;
}

效果：两行项目在侧轴方向上拉伸，每行高度相等，总高度等于容器高度（300px），适合多行等高布局。

示例 2：flex-start（顶部对齐）

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：两行项目整体靠容器顶部对齐，适合多行顶部对齐布局。

示例 3：flex-end（底部对齐）

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-end;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：两行项目整体靠容器底部对齐，适合多行底部对齐布局。

示例 4：center（垂直居中）

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：两行项目整体在容器中垂直居中，适合多行居中布局。

示例 5：space-between（两端对齐）

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-between;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：第一行靠顶部，最后一行靠底部，中间间距自动分配，适合多行两端对齐布局。

示例 6：space-around（均匀分布）

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：每行两侧的间距相等，首尾行与容器边缘的间距为中间行间距的一半，布局更宽松。

3.6 flex-flow：flex-direction 和 flex-wrap 的简写属性（常用属性）

为了简化代码，CSS 提供了flex-flow属性，它是flex-direction和flex-wrap的简写属性，顺序无严格要求（建议遵循 “方向→换行” 的习惯）。

3.6.1 语法

flex-flow: <flex-direction> || <flex-wrap>;

3.6.2 常用取值示例

简写写法	等价于	适用场景
flex-flow: row nowrap	flex-direction: row; flex-wrap: nowrap	默认布局，横向不换行
flex-flow: row wrap	flex-direction: row; flex-wrap: wrap	横向换行，响应式布局
flex-flow: column wrap	flex-direction: column; flex-wrap: wrap	纵向换行，特殊布局
flex-flow: row-reverse wrap	flex-direction: row-reverse; flex-wrap: wrap	反向横向换行

3.6.3 示例演示

.container {
  width: 500px;
  height: 300px;
  background-color: red;
  display: flex;
  flex-flow: row wrap; /* 等价于 flex-direction: row; flex-wrap: wrap */
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
}

.container span {
  width: 150px;
  height: 80px;
  background-color: green;
  margin: 10px 0;
}

效果：与分开设置flex-direction: row和flex-wrap: wrap效果完全一致，代码更简洁。

四、Flex 项目的常用属性：精细控制单个项目

除了弹性容器的属性，Flex 布局还提供了弹性项目的属性，用于精细控制单个项目的尺寸、对齐方式和排列顺序。常用的弹性项目属性有以下 4 个：

flex-grow：设置项目的放大比例（核心属性）。
flex-shrink：设置项目的缩小比例（核心属性）。
flex-basis：设置项目在主轴上的初始尺寸（核心属性）。
flex：flex-grow、flex-shrink和flex-basis的简写属性（常用属性）。
align-self：设置单个项目在侧轴上的对齐方式（补充属性）。
order：设置项目的排列顺序（补充属性）。

4.1 flex-grow：项目的放大比例（核心属性）

flex-grow属性用于设置弹性项目在主轴方向上的放大比例，决定了项目如何分配容器的剩余空间。默认值为0，表示项目不放大。

4.1.1 语法

flex-grow: <number>; /* 数值为非负数，默认值0 */

4.1.2 核心原理

剩余空间：容器宽度（或高度）减去所有项目的初始宽度（或高度）之和。
放大比例：项目的flex-grow值越大，分配到的剩余空间越多。
计算方式：单个项目分配到的剩余空间 = 剩余空间 ×（当前项目的flex-grow值 / 所有项目的flex-grow值之和）。

4.1.3 示例演示

示例 1：所有项目 flex-grow 均为 1（平均分配剩余空间）

.container {
  width: 800px;
  height: 150px;
  background-color: red;
  display: flex;
  align-items: center;
}

.container span {
  width: 100px; /* 初始宽度 */
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex-grow: 1; /* 放大比例为1 */
}

剩余空间：800px -（100px×3 + 10px×2）= 800px - 320px = 480px。
每个项目分配到的剩余空间：480px ×（1 / 3）= 160px。
每个项目的最终宽度：100px + 160px = 260px。
效果：三个项目平均分配剩余空间，最终宽度相等。

示例 2：项目 flex-grow 值不同（按比例分配剩余空间）

.container {
  width: 800px;
  height: 150px;
  background-color: red;
  display: flex;
  align-items: center;
}

.span1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex-grow: 1; /* 放大比例1 */
}

.span2 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex-grow: 2; /* 放大比例2 */
}

.span3 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex-grow: 1; /* 放大比例1 */
}

剩余空间：800px -（100px×3 + 10px×2）= 480px。
总放大比例：1 + 2 + 1 = 4。
span1 分配到的剩余空间：480px ×（1/4）= 120px → 最终宽度 220px。
span2 分配到的剩余空间：480px ×（2/4）= 240px → 最终宽度 340px。
span3 分配到的剩余空间：480px ×（1/4）= 120px → 最终宽度 220px。
效果：span2 的宽度是其他两个项目的 1.5 倍，按比例分配剩余空间。

4.1.4 实战场景：主内容区自适应布局

在页面布局中，通常需要主内容区自适应剩余空间，侧边栏固定宽度，使用flex-grow可以轻松实现：

.page-container {
  width: 100%;
  height: 100vh;
  display: flex;
}

.sidebar {
  width: 250px; /* 固定宽度 */
  background-color: #333;
  color: #fff;
  padding: 20px;
}

.main-content {
  flex-grow: 1; /* 自适应剩余空间 */
  background-color: #f5f5f5;
  padding: 20px;
}

HTML 结构：

<div class="page-container">
  <div class="sidebar">侧边栏（固定宽度250px）</div>
  <div class="main-content">主内容区（自适应剩余空间）</div>
</div>

效果：侧边栏固定 250px 宽，主内容区占满页面剩余宽度，无论页面尺寸如何变化，主内容区都会自动调整，是后台管理系统的经典布局方式。

4.2 flex-shrink：项目的缩小比例（核心属性）

flex-shrink属性用于设置弹性项目在主轴方向上的缩小比例，决定了项目在容器空间不足时如何被压缩。默认值为1，表示项目会被压缩。

4.2.1 语法

flex-shrink: <number>; /* 数值为非负数，默认值1 */

4.2.2 核心原理

不足空间：所有项目的初始宽度（或高度）之和减去容器宽度（或高度）。
缩小比例：项目的flex-shrink值越大，被压缩的幅度越大。
计算方式：单个项目被压缩的空间 = 不足空间 ×（当前项目的flex-shrink值 × 初始宽度 / 所有项目的flex-shrink值 × 初始宽度之和）。

4.2.3 示例演示

示例 1：所有项目 flex-shrink 均为 1（默认，均匀压缩）

.container {
  width: 500px;
  height: 150px;
  background-color: red;
  display: flex;
  align-items: center;
}

.container span {
  width: 200px; /* 初始宽度，总宽度600px > 容器宽度500px */
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex-shrink: 1; /* 默认值，会被压缩 */
}

不足空间：（200px×3 + 10px×2）- 500px = 620px - 500px = 120px。
总压缩权重：（1×200）+（1×200）+（1×200）= 600。
每个项目被压缩的空间：120px ×（1×200 / 600）= 40px。
每个项目的最终宽度：200px - 40px = 160px。
效果：三个项目均匀被压缩，最终宽度相等。

示例 2：某个项目 flex-shrink 为 0（不被压缩）

.container {
  width: 500px;
  height: 150px;
  background-color: red;
  display: flex;
  align-items: center;
}

.span1 {
  width: 200px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex-shrink: 0; /* 不被压缩 */
}

.span2, .span3 {
  width: 200px;
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex-shrink: 1; /* 被压缩 */
}

不足空间：（200px×3 + 10px×2）- 500px = 120px。
总压缩权重：（0×200）+（1×200）+（1×200）= 400。
span1 被压缩的空间：120px ×（0×200 / 400）= 0px → 最终宽度 200px。
span2、span3 被压缩的空间：120px ×（1×200 / 400）= 60px → 最终宽度 140px。
效果：span1 保持初始宽度不被压缩，span2 和 span3 被压缩，适合需要固定宽度的项目。

4.2.4 实战场景：固定宽度的搜索框

在导航栏中，搜索框通常需要固定宽度，不被压缩，其他项目可以被压缩，使用flex-shrink: 0可以实现：

.navbar {
  width: 100%;
  height: 60px;
  background-color: #333;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.logo {
  color: #fff;
  font-size: 20px;
  margin-right: 20px;
  flex-shrink: 0; /* 不被压缩 */
}

.search-box {
  width: 200px;
  height: 36px;
  border-radius: 18px;
  border: none;
  padding: 0 15px;
  flex-shrink: 0; /* 搜索框固定宽度，不被压缩 */
}

.nav-links {
  display: flex;
  margin-left: auto;
  gap: 20px;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  flex-shrink: 1; /* 空间不足时被压缩 */
}

HTML 结构：

<div class="navbar">
  <div class="logo">LOGO</div>
  <input type="text" class="search-box" placeholder="搜索">
  <div class="nav-links">
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">关于我们</a>
    <a href="#">联系我们</a>
  </div>
</div>

效果：当页面宽度不足时，导航链接会被压缩，而 LOGO 和搜索框保持固定宽度，不会被压缩，确保核心功能区域正常显示。

4.3 flex-basis：项目的初始尺寸（核心属性）

flex-basis属性用于设置弹性项目在主轴方向上的初始尺寸，相当于项目的 “默认宽度” 或 “默认高度”，优先级高于width或height属性（当主轴为水平时，flex-basis替代width；当主轴为垂直时，替代height）。默认值为auto，表示项目的初始尺寸由内容决定或由width/height设置。

4.3.1 语法

flex-basis: <length> | auto; /* 数值+单位（px、em等）或auto，默认值auto */

4.3.2 取值详解

取值	初始尺寸描述	适用场景
auto（默认）	初始尺寸由项目内容或width/height决定	默认布局，无需指定初始尺寸
具体数值（如100px、20%）	初始尺寸为指定数值，优先级高于width/height	需要固定初始尺寸的项目

4.3.3 示例演示

示例 1：flex-basis 设置为具体数值（替代 width）

.container {
  width: 800px;
  height: 150px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.container span {
  height: 100px;
  background-color: green;
  flex-basis: 150px; /* 初始宽度150px，替代width */
  width: 200px; /* 无效，被flex-basis覆盖 */
}

效果：项目的初始宽度为 150px，width: 200px被忽略，flex-basis优先级更高。

示例 2：flex-basis 与 flex-grow 配合使用

.container {
  width: 800px;
  height: 150px;
  background-color: red;
  display: flex;
  align-items: center;
}

.span1 {
  height: 100px;
  background-color: green;
  flex-basis: 100px;
  flex-grow: 1;
}

.span2 {
  height: 100px;
  background-color: green;
  flex-basis: 200px;
  flex-grow: 2;
}

初始总宽度：100px + 200px = 300px。
剩余空间：800px - 300px = 500px。
总放大比例：1 + 2 = 3。
span1 最终宽度：100px + 500px×(1/3) ≈ 266.67px。
span2 最终宽度：200px + 500px×(2/3) ≈ 533.33px。
效果：项目按flex-basis设置初始尺寸，再按flex-grow比例分配剩余空间。

4.4 flex：flex-grow、flex-shrink 和 flex-basis 的简写属性（常用属性）

flex属性是flex-grow、flex-shrink和flex-basis的简写属性，是实际开发中最常用的弹性项目属性，语法简洁，功能强大。

4.4.1 语法

flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];

简写规则：
- 单值语法：flex: <number> → 等价于flex: <number> 1 0%（放大比例为该数值，缩小比例 1，初始尺寸 0%）。
- 双值语法：flex: <number> <number> → 等价于flex: <flex-grow> <flex-shrink> 0%。
- 双值语法：flex: <number> <length> → 等价于flex: <flex-grow> 1 <flex-basis>。
- 三值语法：flex: <flex-grow> <flex-shrink> <flex-basis> → 完整写法。
- 关键字：flex: none → 等价于flex: 0 0 auto（不放大、不缩小、初始尺寸 auto）；flex: auto → 等价于flex: 1 1 auto（放大、缩小、初始尺寸 auto）。

4.4.2 常用取值示例

简写写法	等价于	适用场景
flex: 1	flex: 1 1 0%	自适应剩余空间，平均分配（最常用）
flex: 2	flex: 2 1 0%	按比例分配剩余空间，放大比例为 2
flex: none	flex: 0 0 auto	固定尺寸，不放大、不缩小（如 LOGO、按钮）
flex: auto	flex: 1 1 auto	自适应剩余空间，初始尺寸由内容决定
flex: 1 0 200px	flex: 1 0 200px	初始宽度 200px，可放大、不缩小

4.4.3 示例演示（最常用：flex: 1）

.container {
  width: 800px;
  height: 150px;
  background-color: red;
  display: flex;
  align-items: center;
}

.container span {
  height: 100px;
  background-color: green;
  margin: 0 10px;
  flex: 1; /* 等价于 flex: 1 1 0%，平均分配剩余空间 */
}

效果：三个项目平均分配容器剩余空间，最终宽度相等，是自适应布局的最常用写法。

4.5 align-self：单个项目的侧轴对齐方式（补充属性）

align-self属性用于设置单个弹性项目在侧轴方向上的对齐方式，会覆盖弹性容器的align-items属性，实现单个项目的特殊对齐需求。默认值为auto，表示继承父容器的align-items属性。

4.5.1 语法

align-self: auto | stretch | flex-start | flex-end | center | baseline;

取值与align-items完全一致，只是作用对象从所有项目变为单个项目。

4.5.2 示例演示

.container {
  width: 800px;
  height: 200px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: flex-start; /* 所有项目顶部对齐 */
  padding-top: 20px;
}

.container span {
  width: 150px;
  height: 100px;
  background-color: green;
}

.span2 {
  align-self: center; /* 单个项目垂直居中，覆盖align-items */
}

.span3 {
  align-self: flex-end; /* 单个项目底部对齐，覆盖align-items */
}

效果：span1 顶部对齐（继承align-items: flex-start），span2 垂直居中（align-self: center），span3 底部对齐（align-self: flex-end），实现单个项目的特殊对齐。

4.6 order：项目的排列顺序（补充属性）

order属性用于设置弹性项目的排列顺序，数值越小，排列越靠前。默认值为0，支持负数。

4.6.1 语法

order: <integer>; /* 整数，默认值0 */

4.6.2 示例演示

.container {
  width: 800px;
  height: 150px;
  background-color: red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.container span {
  width: 150px;
  height: 100px;
  background-color: green;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.span1 {
  order: 2; /* 顺序2 */
}

.span2 {
  order: 1; /* 顺序1 */
}

.span3 {
  order: 3; /* 顺序3 */
}

效果：项目按order值从小到大排列，顺序为 span2（1）→ span1（2）→ span3（3），实现自定义排列顺序。

五、Flex 布局常见问题与避坑指南

5.1 常见问题及解决方案

问题场景	原因分析	解决方案
弹性项目无法水平 / 垂直居中	未正确设置justify-content或align-items，或主轴方向错误	1. 确认flex-direction设置的主轴方向；2. 水平居中用justify-content: center，垂直居中用align-items: center
弹性项目被压缩变形	默认flex-shrink: 1，容器空间不足时项目会被压缩	给需要固定尺寸的项目设置flex-shrink: 0，或通过min-width/min-height限制最小尺寸
弹性项目换行后间距异常	未设置align-content，多行项目默认stretch拉伸	换行场景下使用align-content: space-around/center控制多行间距，避免拉伸导致的布局混乱
子元素 float/vertical-align 失效	Flex 容器会覆盖子元素的浮动、垂直对齐属性	无需使用 float/vertical-align，通过 Flex 容器的justify-content/align-items控制对齐，更简洁高效
弹性项目宽度设置无效	主轴为水平时，flex-basis优先级高于width；或项目被flex-grow/flex-shrink影响	1. 需固定宽度时，配合flex-shrink: 0使用；2. 无需固定宽度时，直接通过flex-basis设置初始尺寸

5.2 避坑实战案例

案例 1：弹性项目被意外压缩

/* 问题代码 */
.container {
  width: 400px;
  display: flex;
}

.item {
  width: 150px; /* 期望宽度150px，但实际被压缩 */
  height: 100px;
  background-color: red;
}

原因：3 个项目总宽度 450px > 容器宽度 400px，默认flex-shrink: 1导致项目被压缩。
解决方案：给项目设置flex-shrink: 0，禁止压缩：

.item {
  width: 150px;
  height: 100px;
  background-color: red;
  flex-shrink: 0; /* 禁止压缩 */
}

或设置flex-wrap: wrap让项目换行：

.container {
  width: 400px;
  display: flex;
  flex-wrap: wrap; /* 换行 */
  gap: 10px;
}

案例 2：垂直居中失效

/* 问题代码 */
.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 期望垂直居中，但无效 */
}

原因：flex-direction: column时，主轴为垂直方向，justify-content控制垂直对齐，align-items控制水平对齐，若容器未设置高度，justify-content无效。
解决方案：确保容器有明确高度（或通过flex: 1继承父容器高度）：

.container {
  height: 300px; /* 明确高度 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中生效 */
}

六、Flex 布局与传统布局的对比

6.1 核心差异

布局方式	优势	劣势	适用场景
Flex 布局	1. 语法简洁，几行代码实现复杂布局；2. 天然支持水平 / 垂直居中；3. 自适应能力强，轻松实现响应式；4. 无需处理浮动塌陷	1. IE11 以下兼容性较差（需前缀）；2. 子元素 float/clear 失效（需适应 Flex 思维）	现代网页布局、响应式设计、组件布局（导航栏、卡片、表单）
传统布局（浮动 + 定位）	1. 兼容性好（支持 IE6+）；2. 思维成熟，开发者熟悉	1. 代码繁琐，需处理浮动塌陷；2. 垂直居中实现复杂；3. 自适应布局需手动计算尺寸	旧项目维护、需兼容极低版本浏览器的场景

6.2 实战对比：实现三栏布局

（1）传统布局（浮动 + margin）

/* 代码繁琐，需处理浮动塌陷 */
.container {
  width: 100%;
  overflow: hidden; /* 清除浮动 */
}

.left {
  width: 200px;
  height: 500px;
  background-color: red;
  float: left;
}

.middle {
  height: 500px;
  background-color: green;
  margin: 0 200px; /* 手动计算左右边距 */
}

.right {
  width: 200px;
  height: 500px;
  background-color: blue;
  float: right;
}

（2）Flex 布局

/* 代码简洁，无需处理浮动 */
.container {
  width: 100%;
  height: 500px;
  display: flex;
}

.left, .right {
  width: 200px;
  flex-shrink: 0; /* 固定宽度，不被压缩 */
}

.left {
  background-color: red;
}

.middle {
  flex: 1; /* 自适应剩余空间 */
  background-color: green;
}

.right {
  background-color: blue;
}

对比可见，Flex 布局无需处理浮动塌陷，中间栏通过flex: 1自动适配，代码量减少 50% 以上，维护成本更低。

总结

Flex 布局彻底改变了 CSS 布局的方式，它的简洁、灵活和强大，让前端开发者从繁琐的尺寸计算和兼容性处理中解放出来，专注于页面设计和用户体验。只要掌握了核心属性和布局逻辑，就能轻松应对从简单组件到复杂页面的各种布局需求。希望这篇文章能帮助你真正精通 Flex 布局，在实际开发中灵活运用，打造出更优雅、更高效的网页布局！如果有任何问题或疑问，欢迎在评论区留言交流～

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-30，如有侵权请联系 cloudcommunity@tencent.com 删除

容器