Flexbox，即 Flexible Box（弹性盒布局），是一种现代的 CSS 布局方式。与传统的布局方式相比，Flexbox 更加强大、灵活，支持复杂的页面布局。本文将介绍如何利用 Flexbox 布局实现经典的九宫格布局。
1. 九宫格布局概述
九宫格布局是一种经典的布局方式，通常用于手机应用程序的主页以及功能入口页面中。它将屏幕分为九个区域，每个区域都放置一个功能模块。布局通常如下图所示：
从上图中可以看出，九宫格布局特点如下：
- 屏幕被分成 9 个区域；
- 中心区域占据 1/3 的宽度和高度；
- 周围的 8 个区域各占据 1/3 的宽度和高度；
- 同一行或同一列的区域具有相同的宽度或高度。
接下来我们将介绍如何利用 Flexbox 布局实现这种布局方式。
2. 使用 Flexbox 布局实现九宫格布局
使用 Flexbox 布局实现九宫格布局，需要掌握以下几个知识点：
2.1 Flexbox 容器
在 Flexbox 布局中，使用 display: flex 将一个容器声明为 Flexbox 容器。Flexbox 容器中的所有子元素（称为 Flexbox 项）将自动布局，可以使用一系列的属性来控制 Flexbox 项的行为。
示例代码：
.container { display: flex; }
2.2 Flexbox 方向
Flexbox 方向有两种，分别是水平方向和垂直方向。默认情况下，Flexbox 容器的方向为水平方向。
我们可以使用 flex-direction 属性来调整 Flexbox 容器的方向。当值为 row 时，容器方向为水平方向；当值为 column 时，容器方向为垂直方向。
示例代码：
.container { display: flex; flex-direction: row; }
2.3 Flexbox 对齐方式
Flexbox 支持一系列的对齐方式，可以控制 Flexbox 项在交叉轴（即不同于方向轴的轴）上的位置。
常用的对齐方式包括以下几种：
justify-content：控制 Flexbox 项在主轴方向（即方向轴）上的位置；align-items：控制 Flexbox 项在交叉轴上的位置；align-content：只在 Flexbox 容器多行时有效，控制多行在交叉轴上的位置。
示例代码：
.container { display: flex; justify-content: center; align-items: center; }
2.4 Flexbox 项的属性
在 Flexbox 布局中，每个子元素被称为 Flexbox 项。可以使用一系列的属性来控制 Flexbox 项的属性。
常用的属性包括以下几种：
flex-grow：指定 Flexbox 项沿着主轴方向的扩展比率，即按比例分配主轴上的剩余空间；flex-shrink：指定 Flexbox 项沿着主轴方向的缩小比率；flex-basis：指定 Flexbox 项沿着主轴方向的初始尺寸；order：指定 Flexbox 项在容器中的顺序。
示例代码：
.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0; order: 0; }
3. 利用 Flexbox 布局实现九宫格布局示例
现在，我们就可以利用所学的知识点来实现九宫格布局了。
示例代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ------展开代码
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- ------- ------ - ----- - ---------- -- ------------ -- ----------- -------- ------- -------- - ------------------ - ----------- -------- ------- -------- - ------------------- ------------------- ------------------- ------------------- ------------------- ------------------- ------------------- ------------------ - ------- --- ----- ----- -展开代码
代码解析：
.container被声明为 Flexbox 容器，使用flex-wrap: wrap控制 Flexbox 项的换行；.item为 Flexbox 项，高度为 33.333%，宽度由flex-basis: 33.333%控制；.item:nth-child(5)为中心区域的 Flexbox 项，高度为 66.667%，宽度由flex-basis: 66.667%控制；.item:nth-child(1),.item:nth-child(2),.item:nth-child(3),.item:nth-child(4),.item:nth-child(6),.item:nth-child(7),.item:nth-child(8),.item:nth-child(9)为周围区域的 Flexbox 项，使用border进行边框添加。
4. 总结
本文介绍了如何利用 Flexbox 布局实现经典的九宫格布局。通过本文的学习，我们可以掌握 Flexbox 的基本原理和使用方法，实现各种复杂的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad12ad48841e9894938fde
