CSS 布局：Flexbox 与 Grid 布局

第一阶段：掌握 Flexbox 一维布局

Flexbox（弹性盒子）适合处理“一行”或“一列”的布局问题。想象一串珠子，你可以控制它们排成一行还是一列，以及它们如何分散对齐。

1. 创建基础容器

打开 你的代码编辑器。新建 一个 HTML 文件并输入以下基础结构。这创建了一个包含三个子项目的容器。

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

切换 到 CSS 文件。设置 容器的 display 属性为 flex。这是激活 Flexbox 布局的唯一开关。

.flex-container {
  display: flex; /* 将容器定义为弹性盒子 */
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  margin: 5px;
}

2. 控制排列方向

添加 flex-direction 属性到 .flex-container 类中。这决定了主轴的方向。

• 输入 row：项目从左到右水平排列（默认值）。
• 输入 column：项目从上到下垂直排列。

.flex-container {
  display: flex;
  flex-direction: row; /* 或者 column */
}

3. 调整主轴对齐

使用 justify-content 属性控制项目在主轴（横线）上的分布方式。在 .flex-container 中添加以下代码：

.flex-container {
  display: flex;
  justify-content: center; /* 居中对齐 */
}

尝试 替换 center 为以下值观察效果：

• flex-start：项目向起点靠拢。
• flex-end：项目向终点靠拢。
• space-between：两端对齐，项目之间间隔相等。
• space-around：项目两侧间隔相等。

4. 调整交叉轴对齐

使用 align-items 属性控制项目在交叉轴（垂直于主轴的线）上的对齐方式。确保 容器有足够的高度（例如设置 height: 200px）才能看到垂直效果。

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

第二阶段：掌握 Grid 二维布局

Grid（网格）布局适合处理“多行多列”的复杂页面结构。想象一个 Excel 表格或棋盘，你可以精确控制每个单元格的位置和大小。

1. 定义网格骨架

输入 以下 HTML 结构，这代表一个标准的网页骨架。

<div class="grid-container">
  <div class="header">头部</div>
  <div class="sidebar">侧边栏</div>
  <div class="main">主内容</div>
  <div class="footer">底部</div>
</div>

在 CSS 中 设置 容器为 grid 并 定义 行列划分。

.grid-container {
  display: grid;
  /* 定义三列：第一列200px，第三列200px，中间列自动填充剩余空间 */
  grid-template-columns: 200px auto 200px;
  /* 定义两行：第一行100px，第二行占据剩余高度 */
  grid-template-rows: 100px auto;
  gap: 10px; /* 单元格之间的间距 */
  height: 100vh; /* 占满全屏高度 */
}

2. 放置网格项目

使用 grid-area 或行列线来指定元素的具体位置。修改 CSS，通过名字将元素“贴”到指定区域。

首先，在 .grid-container 中 定义 区域模板：

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 80px 1fr;
  gap: 10px;
  /* 定义区域名称地图 */
  grid-template-areas:
    "header header header"
    "sidebar main aside";
}

然后，分配 每个子元素对应的区域名称：

.header { grid-area: header; background-color: #ff7f50; }
.sidebar { grid-area: sidebar; background-color: #87cefa; }
.main { grid-area: main; background-color: #f0f0f0; }
.aside { grid-area: aside; background-color: #90ee90; }

第三阶段：布局方案选择策略

面对布局需求时，选择正确的工具是高效开发的关键。

决策流程

以下流程图展示了如何根据需求快速做出判断：

核心差异对比

以下表格总结了两者最本质的区别：

实战组合技巧

在实际开发中，两者通常配合使用：

1. 使用 Grid 划分页面的宏观结构（如头部、侧边栏、主体、底部）。
2. 使用 Flexbox 处理微观元素（如导航栏内的菜单项对齐、卡片内部文字与图标的排列）。