第20篇：Flexbox 基础与容器属性

Flexbox（弹性盒子）是 CSS 最强大的布局系统之一。它专门用于一维布局（行或列），让元素在容器内的对齐、分布和排序变得异常简单。本篇将系统讲解 Flexbox 容器属性的全部用法。

---

学习目标

• 理解 Flexbox 的设计初衷与适用场景
• 掌握 display: flex 与 inline-flex 的区别
• 掌握 flex-direction 控制主轴方向
• 掌握 flex-wrap 控制换行行为
• 掌握 justify-content 的主轴对齐方式
• 掌握 align-items 的交叉轴对齐方式
• 掌握 align-content 的多行对齐方式
• 掌握 gap 设置项目间距

---

核心知识点

一、Flexbox 概述

Flexbox 是 CSS3 引入的一维布局模型，旨在解决传统布局（浮动、定位）在弹性布局场景下的不足。

核心概念

┌─────────────────────────────────────────┐
│  flex container（弹性容器）              │
│  ┌─────┐ ┌─────┐ ┌─────┐               │
│  │ item│ │ item│ │ item│  flex items    │
│  └─────┘ └─────┘ └─────┘  （弹性项目）   │
│  ↑_________↑_________↑                  │
│       main axis（主轴）                  │
│       默认水平方向                        │
└─────────────────────────────────────────┘

• 主轴（Main Axis）：flex 项目排列的主要方向，由 flex-direction 决定
• 交叉轴（Cross Axis）：垂直于主轴的方向
• 弹性容器（Flex Container）：设置了 display: flex 的元素
• 弹性项目（Flex Items）：容器内的直接子元素

创建 Flex 容器

.container {
  display: flex;        /* 块级弹性容器 */
}

.inline-container {
  display: inline-flex; /* 行内弹性容器，类似 inline-block */
}

<div class="container">
  <div>项目1</div>
  <div>项目2</div>
  <div>项目3</div>
</div>

设置 display: flex 后，容器的直接子元素自动成为 flex items，按照 flex 规则排列。

---

二、flex-direction：主轴方向

控制 flex items 的排列方向。

.container {
  flex-direction: row;           /* 默认值：水平，从左到右 */
  flex-direction: row-reverse;   /* 水平，从右到左 */
  flex-direction: column;        /* 垂直，从上到下 */
  flex-direction: column-reverse;/* 垂直，从下到上 */
}

取值	方向	主轴	交叉轴
row	水平，左→右	水平	垂直
row-reverse	水平，右→左	水平	垂直
column	垂直，上→下	垂直	水平
column-reverse	垂直，下→上	垂直	水平

.nav {
  display: flex;
  flex-direction: row;      /* 水平导航 */
}

.sidebar {
  display: flex;
  flex-direction: column;   /* 垂直堆叠 */
}

---

三、flex-wrap：换行控制

当 flex items 总宽度超过容器时，默认会压缩 items 宽度以适应一行。flex-wrap 控制是否允许换行。

.container {
  flex-wrap: nowrap;         /* 默认值：不换行，压缩 items */
  flex-wrap: wrap;           /* 允许换行 */
  flex-wrap: wrap-reverse;   /* 允许换行，从底部开始 */
}

/* 响应式卡片网格 */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.card-grid .card {
  flex: 0 0 300px;  /* 不伸缩，基础宽度 300px */
}

---

四、flex-flow：简写属性

flex-flow 是 flex-direction 和 flex-wrap 的简写。

.container {
  flex-flow: row wrap;           /* 水平排列，允许换行 */
  flex-flow: column nowrap;      /* 垂直排列，不换行 */
  flex-flow: row-reverse wrap;   /* 从右到左，允许换行 */
}

---

五、justify-content：主轴对齐

控制 flex items 在主轴上的对齐方式。

.container {
  justify-content: flex-start;    /* 默认值：靠起点对齐 */
  justify-content: flex-end;      /* 靠终点对齐 */
  justify-content: center;        /* 居中对齐 */
  justify-content: space-between; /* 两端对齐，项目间等距 */
  justify-content: space-around;  /* 项目两侧等距 */
  justify-content: space-evenly;  /* 所有间距完全相等 */
}

取值	效果
flex-start	项目靠主轴起点
flex-end	项目靠主轴终点
center	项目居中
space-between	首尾项目贴边，中间等距
space-around	每个项目两侧间距相等（首尾有半间距）
space-evenly	所有间距（包括首尾）完全相等

/* 导航栏右对齐 */
.nav {
  display: flex;
  justify-content: flex-end;
}

/* 按钮组居中 */
.button-group {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 底部操作栏两端对齐 */
.footer-actions {
  display: flex;
  justify-content: space-between;
}

---

六、align-items：交叉轴对齐

控制 flex items 在交叉轴上的对齐方式（单行）。

.container {
  align-items: stretch;       /* 默认值：拉伸填满容器 */
  align-items: flex-start;    /* 靠交叉轴起点 */
  align-items: flex-end;      /* 靠交叉轴终点 */
  align-items: center;        /* 交叉轴居中 */
  align-items: baseline;      /* 文字基线对齐 */
}

取值	效果
stretch	拉伸以填满交叉轴（默认）
flex-start	靠交叉轴起点
flex-end	靠交叉轴终点
center	交叉轴居中
baseline	文字基线对齐

/* 垂直居中 */
.center-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

/* 顶部对齐的卡片列表 */
.card-list {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

---

七、align-content：多行对齐

当 flex-wrap: wrap 且有多行时，控制行与行之间在交叉轴上的对齐方式。

.container {
  align-content: stretch;        /* 默认值：拉伸填满 */
  align-content: flex-start;     /* 靠交叉轴起点 */
  align-content: flex-end;       /* 靠交叉轴终点 */
  align-content: center;         /* 交叉轴居中 */
  align-content: space-between;  /* 两端对齐 */
  align-content: space-around;   /* 行间等距 */
  align-content: space-evenly;   /* 所有间距相等 */
}

注意：align-content 只在多行时生效。单行时使用 align-items。

---

八、gap：项目间距

.container {
  gap: 16px;              /* 行和列间距都是 16px */
  gap: 12px 24px;         /* 行间距 12px，列间距 24px */
  row-gap: 12px;          /* 行间距 */
  column-gap: 24px;       /* 列间距 */
}

/* 响应式网格 */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.grid > * {
  flex: 1 1 200px;  /* 可伸缩，基础宽度 200px */
}

gap 是最推荐的间距方案，比 margin 更简洁，无需处理最后一个元素的间距问题。

---

九、容器属性速查

.container {
  display: flex;                    /* 创建 flex 容器 */
  flex-direction: row;              /* 主轴方向 */
  flex-wrap: wrap;                  /* 换行 */
  justify-content: center;          /* 主轴对齐 */
  align-items: center;              /* 交叉轴对齐（单行） */
  align-content: stretch;           /* 多行对齐 */
  gap: 16px;                        /* 项目间距 */
}

---

动手练习

练习 1：完美居中

创建一个容器，让内部的子元素水平和垂直都居中：

• 容器高度 300px
• 子元素在正中心

练习 2：两端对齐导航栏

实现一个导航栏：

• 左侧是 Logo
• 右侧是导航链接
• 使用 justify-content: space-between

练习 3：响应式卡片网格

使用 Flexbox 实现一个卡片网格：

• 每行最多 3 张卡片
• 卡片之间有间距
• 窗口缩小时自动换行

---

常见误区 ⚠️

误区	真相
“display: flex 让容器变成行内元素”	不，display: flex 是块级容器，类似 block；inline-flex 才是行内
“justify-content 控制垂直对齐”	它控制的是主轴对齐。默认主轴是水平的，但如果 flex-direction: column，主轴就是垂直的
“align-items 总是控制垂直对齐”	它控制的是交叉轴对齐。默认交叉轴是垂直的，但如果 flex-direction: column，交叉轴就是水平的
“gap 属性兼容性不好”	现代浏览器全部支持，包括 Safari 14.1+。是最推荐的间距方案
“align-content 可以替代 align-items”	align-content 只在多行时生效，单行时需要用 align-items
“flex items 的 float 和 clear 仍然有效”	错误！flex items 的 float/clear/vertical-align 会失效
“flex-wrap: wrap 会自动等高”	不，换行后的每行高度独立。需要等高时用 align-items: stretch

---

速查卡片 📋

创建 Flex 容器

.container {
  display: flex;
}

常用容器属性组合

/* 水平居中 */
.center-h {
  display: flex;
  justify-content: center;
}

/* 垂直居中 */
.center-v {
  display: flex;
  align-items: center;
}

/* 完美居中 */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 两端对齐 */
.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

方向与换行

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

对齐方式

属性	作用
justify-content	主轴对齐
align-items	交叉轴对齐（单行）
align-content	交叉轴对齐（多行）

---

扩展阅读

• MDN: Flexbox
• MDN: display
• CSS-Tricks: A Complete Guide to Flexbox（英文，最权威）
• Flexbox Froggy（游戏化学习）

---

📌 配套代码：

• CODE/20/flex-container.html — Flexbox 容器属性演示
• CODE/20/flex-alignment.html — 对齐方式交互演示

🎉 下一步：进入 第21篇：Flexbox 项目属性与简写，学习如何控制每个 flex item 的行为。