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

前言

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

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

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

1.1 一个简单的 Flex 案例

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

传统布局的痛点

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

css 复制代码

/* 传统布局实现（繁琐且易出问题） */
.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**，再配合两个属性，就能轻松实现需求：

css 复制代码

/* 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 结构：

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 语法

css 复制代码

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

3.1.2 取值详解

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

3.1.3 示例演示

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

css 复制代码

.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（水平向左）

css 复制代码

.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（垂直向下）

css 复制代码

.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（垂直向上）

css 复制代码

.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**可以轻松实现：

css 复制代码

.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 结构：

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 语法

css 复制代码

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（默认，左对齐）

css 复制代码

.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（右对齐）

css 复制代码

.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（水平居中）

css 复制代码

.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（两端对齐，中间均匀分布）

css 复制代码

.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（均匀分布，首尾有间距）

css 复制代码

.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（所有间距相等）

css 复制代码

.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**可以轻松实现导航栏的两端对齐布局：

css 复制代码

.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 结构：

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 语法

css 复制代码

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

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

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

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

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

css 复制代码

.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（顶部对齐）

css 复制代码

.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（底部对齐）

css 复制代码

.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（垂直居中）

css 复制代码

.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（基线对齐）

css 复制代码

.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**配合使用，是实现元素完全居中的最简单方式，无需任何定位技巧。

css 复制代码

.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 结构：

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 语法

css 复制代码

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

3.4.2 取值详解

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

3.4.3 示例演示

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

css 复制代码

.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（换行）

css 复制代码

.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（反向换行）

css 复制代码

.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**可以轻松实现响应式卡片布局，在屏幕宽度足够时横向排列，宽度不足时自动换行：

css 复制代码

.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 结构：

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 语法

css 复制代码

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（默认，拉伸对齐）

css 复制代码

.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（顶部对齐）

css 复制代码

.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（底部对齐）

css 复制代码

.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（垂直居中）

css 复制代码

.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（两端对齐）

css 复制代码

.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（均匀分布）

css 复制代码

.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 语法

css 复制代码

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 示例演示

css 复制代码

.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 语法

css 复制代码

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

4.1.2 核心原理

剩余空间：容器宽度（或高度）减去所有项目的初始宽度（或高度）之和。

放大比例 ：项目的**flex-grow**值越大，分配到的剩余空间越多。

计算方式 ：单个项目分配到的剩余空间 = 剩余空间 ×（当前项目的flex-grow值 / 所有项目的flex-grow值之和）。

4.1.3 示例演示

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

css 复制代码

.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 值不同（按比例分配剩余空间）

css 复制代码

.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**可以轻松实现：

css 复制代码

.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 结构：

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 语法

css 复制代码

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

4.2.2 核心原理

不足空间：所有项目的初始宽度（或高度）之和减去容器宽度（或高度）。

缩小比例：项目的flex-shrink值越大，被压缩的幅度越大。

计算方式：单个项目被压缩的空间 = 不足空间 ×（当前项目的flex-shrink值 × 初始宽度 / 所有项目的flex-shrink值 × 初始宽度之和）。

4.2.3 示例演示

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

css 复制代码

.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（不被压缩）

css 复制代码

.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**可以实现：

css 复制代码

.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 结构：

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 语法

css 复制代码

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）

css 复制代码

.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 配合使用

css 复制代码

.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 语法

css 复制代码

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）

css 复制代码

.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 语法

css 复制代码

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

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

4.5.2 示例演示

css 复制代码

.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 语法

css 复制代码

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

4.6.2 示例演示

css 复制代码

.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：弹性项目被意外压缩

css 复制代码

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

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

原因：3 个项目总宽度 450px > 容器宽度 400px，默认flex-shrink: 1导致项目被压缩。

解决方案 ：给项目设置flex-shrink: 0，禁止压缩：

css 复制代码

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

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

css 复制代码

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

案例 2：垂直居中失效

css 复制代码

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

原因：flex-direction: column时，主轴为垂直方向，justify-content控制垂直对齐，align-items控制水平对齐，若容器未设置高度，justify-content无效。

解决方案 ：确保容器有明确高度（或通过flex: 1继承父容器高度）：

css 复制代码

.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）

css 复制代码

/* 代码繁琐，需处理浮动塌陷 */
.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 布局

css 复制代码

/* 代码简洁，无需处理浮动 */
.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 布局，在实际开发中灵活运用，打造出更优雅、更高效的网页布局！如果有任何问题或疑问，欢迎在评论区留言交流～

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

目录

前言

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

1.1 一个简单的 Flex 案例

传统布局的痛点

Flex 布局的优雅实现

1.2 Flex 布局的核心优势

1.3 初体验总结

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

2.1 核心术语解析

1. 弹性容器（Flex Container）

2. 弹性项目（Flex Item）

3. 主轴（Main Axis）

4. 侧轴（Cross Axis）

2.2 可视化理解 Flex 结构

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

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

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

3.1.1 语法

3.1.2 取值详解

3.1.3 示例演示

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

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

示例 3：column（垂直向下）

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

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

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

3.2.1 语法

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

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

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

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

示例 3：center（水平居中）

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

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

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

3.2.4 实战场景：导航栏布局

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

3.3.1 语法

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

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

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

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

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

示例 4：center（垂直居中）

示例 5：baseline（基线对齐）

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

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

3.4.1 语法

3.4.2 取值详解

3.4.3 示例演示

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

示例 2：wrap（换行）

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

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

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

3.5.1 语法

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

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

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

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

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

示例 4：center（垂直居中）

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

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

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

3.6.1 语法

3.6.2 常用取值示例

3.6.3 示例演示

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

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

4.1.1 语法

4.1.2 核心原理

4.1.3 示例演示

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

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

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

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

4.2.1 语法