CSS Flexbox 是一种强大的 CSS 布局模型，它可以轻松实现各种网页布局和对齐方式。在本文中，我们将介绍关于 CSS Flexbox 的一些基本知识，并演示几种在实现网页布局和对齐方面使用 Flexbox 的最佳实践方法。
1. CSS Flexbox 简介
Flexbox 布局模型使得设计响应式和高度自适应的网页变得十分简单。Flexbox 布局模型由一组属性和项目（item）以及容器（container）元素组成。
Flexbox 容器使用 display: flex 属性来定义，并且所有容器的多个子项通过调整容器的属性来实现布局。
以下是一些常用的 Flexbox 属性：
- flex-direction：指定 Flexbox 轴的方向，默认为水平轴（row）。
- justify-content：使 Flexbox 内容与其容器左对齐、居中、右对齐、均匀分布，以及空间间隔等方式。
- align-items：指定在 Flexbox 容器中的项如何相互垂直对齐。
- flex-wrap：定义子项在容器元素宽度不够时是否进行换行，并指定换行方式。
2. 用 CSS Flexbox 实现网页布局
使用 CSS Flexbox 布局实现网页布局必须要熟悉 Flexbox 容器和子项之间的关系。
2.1 单行 Flexbox 布局
要实现单行网页布局，只需将容器元素的 display 属性设置为 flex，并指定 justify-content 和 align-items 属性即可。
示例代码：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>-- -------------------- ---- -------
---------- -
-------- -----
---------------- --------------
------------ -------
-
----- -
------ ------
------- ------
-效果如下：
2.2 多行 Flexbox 布局
为了实现多行 Flexbox 布局，需要设置容器元素的 flex-wrap 属性为 wrap，并指定 align-content 属性。
示例代码：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-------------- -------------
-
----- -
------ ------
------- ------
-效果如下：
3. 用 CSS Flexbox 实现对齐
CSS Flexbox 还可以轻松实现各种对齐方式，使设计变得十分灵活。
3.1 垂直居中对齐
要在 Flexbox 容器中进行垂直居中对齐，只需指定 align-items 属性为 center。在横向和纵向方向中加入 align-items 属性使容器和其内部项目垂直居中对齐。
示例代码：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>-- -------------------- ---- -------
---------- -
-------- -----
---------------- --------------
------------ -------
------- ------
-
----- -
------ ------
------- ------
-效果如下：
3.2 水平居中对齐
要在 Flexbox 容器中进行水平居中对齐，只需指定 justify-content 属性为 center。在横向和纵向方向中加入 justify-content 属性使容器和其内部项目水平居中对齐。
示例代码：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>-- -------------------- ---- -------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
-
----- -
------ ------
------- ------
-效果如下：
3.3 等距分布对齐
要实现等距分布对齐，只需将 justify-content 属性设置为 space-between 或 space-around。space-between 指定项在容器元素的左右边缘对齐，而 space-around 将容器元素分成多个均匀分布的子元素。
示例代码：
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>-- -------------------- ---- -------
---------- -
-------- -----
---------------- --------------
------------ -------
------- ------
------ ------
------- -----
-
----- -
------ -----
------- ------
-效果如下：
4. 总结
CSS Flexbox 布局模型提供了许多实用的功能，可以简化网页布局和对齐的实现。本文讲解了在实现网页布局和对齐方面的几个最佳实践，包括单行和多行 Flexbox 布局，垂直和水平居中对齐，以及等距分布等。在以后的开发工作中，将更高效地使用 CSS Flexbox 进行网页布局的工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64659eca968c7c53b064d896