深入浅出 Flex 布局：从基础概念到实战应用

Heard_wx998

415人浏览 · 2026-05-26 20:43:42

Heard_wx998 · 2026-05-26 20:43:42 发布

Flex 布局（弹性布局）是 CSS3 引入的一维布局模型，凭借灵活的空间分配、对齐控制能力，成为前端开发中解决布局问题的首选方案。本文将从核心概念入手，逐步拆解 Flex 布局的关键属性，并结合实战案例，带你掌握从基础到进阶的 Flex 布局用法。

一、Flex 布局核心概念

在开始写代码前，先理清 Flex 布局的核心术语，这是理解后续属性的基础：

容器与项目：设置 display: flex 的元素称为「Flex 容器」，其直接子元素就是「Flex 项目」。容器是布局的载体，项目是布局的对象。
主轴与交叉轴：Flex 容器有两根相互垂直的轴：
- 主轴：由 flex-direction 定义，默认是水平从左到右（row）；
- 交叉轴：垂直于主轴，默认是垂直从上到下。
对齐与缩放：布局的核心是「对齐」和「空间分配」—— 对齐控制项目在轴上的位置，缩放控制项目在空间不足 / 富余时的尺寸变化。

二、Flex 容器：掌控布局的「总指挥」

容器是 Flex 布局的核心，通过设置容器的属性，就能决定项目的排列方式、对齐规则。先看容器的核心属性：

1. 开启 Flex 布局：display: flex

这是一切的起点，给元素设置 display: flex 后，其内部子元素会立刻脱离普通文档流，按照 Flex 规则排列：

css

.container {
  display: flex; 
  width: 600px;
  height: 300px;
  border: 2px solid #aaa;
}

此时即使项目是块级元素（如 div），也会默认水平排列，而非传统的垂直换行。

2. 控制排列方向：flex-direction

决定主轴的方向，也就是项目的排列方向：

row（默认）：水平从左到右；
row-reverse：水平从右到左；
column：垂直从上到下；
column-reverse：垂直从下到上。

3. 控制换行：flex-wrap

默认情况下，Flex 项目会强行挤在一行（nowrap），即使总宽度超过容器也会被压缩。想要项目超出容器时自动换行，需设置：

css

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

关键提醒：align-content（多行交叉轴对齐）只有在设置 flex-wrap: wrap 后才生效，单行时此属性无效。

4. 主轴对齐：justify-content

控制项目在主轴（默认水平）上的对齐方式，仅在主轴有剩余空间时生效，是最常用的对齐属性之一：

表格

属性值	效果
flex-start	项目靠主轴起点（左）对齐（默认）
flex-end	项目靠主轴终点（右）对齐
center	项目居中对齐
space-between	项目间距相等，首尾紧贴容器边缘
space-around	项目两侧外边距相等（间距是边缘的 2 倍）
space-evenly	项目之间、项目与容器边缘间距完全相等

示例代码：

css

.container {
  display: flex;
  justify-content: center;
  height: 100px;
  border: 2px solid #a00;
}

5. 交叉轴对齐：align-items & align-content

align-items：控制「单行」项目在交叉轴（默认垂直）上的对齐方式，常用值：stretch（默认，拉伸填满交叉轴）、flex-start（顶部）、flex-end（底部）、center（垂直居中）、baseline（基线对齐）；
align-content：控制「多行」项目在交叉轴上的整体对齐方式（需配合 flex-wrap: wrap），常用值与 justify-content 类似（flex-start/center/space-between 等）。

核心区别：align-items 管「单行内的项目」，align-content 管「多行整体」。

三、Flex 项目：灵活调整自身尺寸

容器决定整体布局规则，项目则可通过属性调整自身的尺寸和缩放规则，核心是三个属性：flex-basis、flex-grow、flex-shrink。

1. flex-basis：初始尺寸

定义项目在主轴上的「理想尺寸」，优先级高于 width/height，默认值 auto（使用项目自身的宽 / 高）。

css

.item {
  flex-basis: 100px; 
}

2. flex-grow：放大比例

容器有剩余空间时，项目的放大比例，默认值 0（不放大）。剩余空间会按 flex-grow 的比例分配给项目：

css


.container {
  display: flex;
  width: 500px;
}
.item1 {
  flex-basis: 100px;
  flex-grow: 1; 
}
.item2 {
  flex-basis: 100px;
  flex-grow: 2; 
}

3. flex-shrink：缩小比例

容器空间不足时，项目的缩小比例，默认值 1（自动缩小），设置为 0 则禁止缩小。压缩量会按比例分配：

css

.container {
  display: flex;
  width: 300px;
}
.item1 {
  flex-basis: 200px;
  flex-shrink: 1; 
}
.item2 {
  flex-basis: 200px;
  flex-shrink: 3; 
}

4. 简写形式

日常开发中常用简写整合三个属性，更简洁：

flex: 1 → flex: 1 1 0%（自动填充剩余空间）；
flex: 0 0 120px → 固定 120px，不放大不缩小；
flex: auto → flex: 1 1 auto。

四、实战案例：Flex 布局的典型应用

理论结合实践，以下两个场景能快速体现 Flex 布局的价值：

案例 1：响应式导航栏

导航栏需要适配不同屏幕尺寸，核心需求：Logo 固定宽度、中间菜单自动填充空间、右侧按钮可轻微收缩。

html

预览

<div style="display: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white;">

  <div style="flex: 0 0 120px; font-weight: bold;">LOGO</div>
  

  <div style="flex: 1 1 0; margin: 0 20px;">
    <div style="display: flex; gap: 15px;">
      <span>首页</span>
      <span>产品</span>
      <span>关于我们</span>
      <span>联系</span>
    </div>
  </div>

  <div style="flex: 0 0.5 80px; text-align: center;">登录</div>
</div>

调整浏览器窗口宽度，能看到菜单区域自动收缩 / 放大，Logo 和按钮始终保持基本显示，适配性拉满。

案例 2：图片画廊布局

实现多行图片的均匀排列，垂直 / 水平都居中，且自动换行：

css

.gallery {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  align-content: space-around; 
  width: 800px;
  height: 500px;
  border: 10px solid #333;
}
.photo {
  flex-basis: 160px; 
  height: 120px;
  color: white;
  text-align: center;
  line-height: 120px;
}

此布局无需计算间距和行数，Flex 会自动处理，简洁且易维护。