📦 第五章：Flexbox 弹性盒子

掌握一维布局的终极解决方案

5.1 Flex 容器与项目的基本概念

Flexbox 是一种一维布局模型，用于在一行或一列中排列元素。

Flexbox 由两个主要部分组成：

基本 Flexbox 示例

1
2
3
.flex-demo {
    display: flex;
    gap: 10px;
}

.flex-item {
    background: #3498db;
    color: white;
    padding: 20px;
}

5.2 主轴与交叉轴

flex-direction

控制 Flex 项目的排列方向，定义了主轴的方向。

.container {
    display: flex;
    flex-direction: row; /* 水平排列（默认）*/
    flex-direction: column; /* 垂直排列 */
    flex-direction: row-reverse; /* 水平反向排列 */
    flex-direction: column-reverse; /* 垂直反向排列 */
}

flex-direction: column 示例

1
2
3

5.3 对齐神器

justify-content

控制 Flex 项目在主轴上的对齐方式。

.container {
    display: flex;
    justify-content: flex-start; /* 起始对齐（默认）*/
    justify-content: flex-end; /* 结束对齐 */
    justify-content: center; /* 居中对齐 */
    justify-content: space-between; /* 两端对齐 */
    justify-content: space-around; /* 均匀分布 */
    justify-content: space-evenly; /* 等距分布 */
}

justify-content: space-between 示例

1
2
3

align-items

控制 Flex 项目在交叉轴上的对齐方式。

.container {
    display: flex;
    align-items: stretch; /* 拉伸填充（默认）*/
    align-items: flex-start; /* 起始对齐 */
    align-items: flex-end; /* 结束对齐 */
    align-items: center; /* 居中对齐 */
    align-items: baseline; /* 基线对齐 */
}

align-items: center 示例

1
2
3

align-content

控制多行 Flex 项目在交叉轴上的对齐方式（仅在多行时有效）。

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch; /* 拉伸填充（默认）*/
    align-content: flex-start; /* 起始对齐 */
    align-content: flex-end; /* 结束对齐 */
    align-content: center; /* 居中对齐 */
    align-content: space-between; /* 两端对齐 */
    align-content: space-around; /* 均匀分布 */
}

5.4 灵活度控制

flex-grow

控制 Flex 项目的拉伸能力。

flex-grow 示例

1
2
3
.flex-grow-demo {
    display: flex;
}

.flex-grow-demo .flex-item {
    flex-grow: 1;
}

.flex-grow-demo .flex-item:nth-child(2) {
    flex-grow: 2;
}

flex-shrink

控制 Flex 项目的收缩能力。

flex-basis

设置 Flex 项目的初始大小。

flex 简写

/* flex: grow shrink basis */
.item {
    flex: 0 1 auto; /* 默认值 */
    flex: 1; /* 等同于 flex: 1 1 0 */
    flex: auto; /* 等同于 flex: 1 1 auto */
    flex: none; /* 等同于 flex: 0 0 auto */
}

5.5 排序与换行

order

控制 Flex 项目的排列顺序。

flex-wrap

控制 Flex 项目是否换行。

.container {
    display: flex;
    flex-wrap: nowrap; /* 不换行（默认）*/
    flex-wrap: wrap; /* 换行 */
    flex-wrap: wrap-reverse; /* 反向换行 */
}

5.6 实战案例

导航栏

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #2c3e50;
    color: white;
}

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

卡片列表

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 300px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

居中布局

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

动手练习

练习 1：Flexbox 基础

  1. 创建一个 Flex 容器，包含 5 个项目
  2. 设置不同的 flex-direction 值，观察变化
  3. 使用 justify-content 和 align-items 进行对齐
  4. 测试 flex-wrap 和 gap 属性

练习 2：响应式导航栏

  1. 创建一个导航栏，包含 logo 和导航链接
  2. 使用 Flexbox 布局，使 logo 在左侧，导航链接在右侧
  3. 添加响应式设计，在小屏幕上导航链接垂直排列

练习 3：卡片网格

  1. 创建一个卡片网格，使用 Flexbox 布局
  2. 设置卡片的 flex 属性，使它们在不同屏幕尺寸下自适应
  3. 添加卡片悬停效果
← 上一章：文本与字体排版 下一章：CSS Grid 网格布局 →