什么是 Flexbox?
Flexbox 是 CSS3 新增的一种布局方式，它使得我们可以更加有效地排列和布局元素。Flexbox 可以让我们快速地实现和调整布局，而不需要使用传统的布局方式，例如浮动和定位。
Flexbox 的核心概念是“弹性容器”和“弹性项目”。我们可以使用 Flexbox 属性对弹性容器和弹性项目进行配置，以实现不同的布局效果。
弹性容器
定义弹性容器很简单，只需要使用 display: flex; 属性即可。以下是一个示例：
.container {
display: flex;
}这样就能将 .container 设置为弹性容器。接下来，我们可以配置弹性项目，以使它们遵循我们的布局要求。
弹性项目
Flexbox 中的弹性项目是指弹性容器中的子元素。我们可以通过设置弹性项目的属性来控制其位置、大小和空间占据等属性。
以下是一些常见的弹性项目属性：
flex-grow：定义项目的放大比例。flex-shrink：定义项目的缩小比例。flex-basis：定义项目的基准大小。flex：定义flex-grow、flex-shrink及flex-basis属性的缩写。align-self：定义弹性项目对齐方式。
弹性容器属性
接下来，我们将介绍一些常见的弹性容器属性，以帮助我们更好地掌握 Flexbox 的布局原理。
flex-wrap
flex-wrap 属性指定弹性项目的排列方式。默认情况下，所有弹性项目在同一行内排列。但是，我们可以使用 flex-wrap 属性来指定在什么情况下换行。默认值为 nowrap。
以下是一个示例：
.container {
flex-wrap: wrap;
}这里，我们将 .container 强制换行，并将弹性项目按照最小宽度进行自适应。
justify-content
justify-content 属性用于定义弹性项目在主轴上的对齐方式。默认值为 flex-start。
以下是一些常见的取值：
flex-start：所有弹性项目在左侧对齐。flex-end：所有弹性项目在右侧对齐。center：所有弹性项目在中间对齐。space-between：弹性项目之间平均分配空间。space-around：弹性项目周围分配相等的空间。
以下是一个示例：
.container {
justify-content: center;
}这里，我们将 .container 中的弹性项目在主轴上居中对齐。
align-items
align-items 属性用于定义弹性项目在交叉轴上的对齐方式。默认值为 stretch。
以下是一些常见的取值：
flex-start：所有弹性项目在交叉轴的起始点对齐。flex-end：所有弹性项目在交叉轴的结束点对齐。center：所有弹性项目在交叉轴上居中对齐。baseline：所有弹性项目在交叉轴上按照基线对齐。
以下是一个示例：
.container {
align-items: center;
}这里，我们将 .container 中的弹性项目在交叉轴上居中对齐。
align-content
align-content 属性用于定义多行弹性容器在交叉轴上的对齐方式。默认值为 stretch。
以下是一些常见的取值：
flex-start：多行弹性容器上端对齐。flex-end：多行弹性容器下端对齐。center：多行弹性容器居中对齐。space-between：弹性容器之间平均分配空间。space-around：弹性容器周围分配相等的空间。stretch：所有弹性容器居中对齐。
以下是一个示例：
.container {
align-content: center;
}这里，我们将 .container 中的多行弹性容器在交叉轴上居中对齐。
总结
Flexbox 是一种灵活、强大的 CSS 布局方案。本文中，我们主要介绍了 Flexbox 的弹性容器和弹性项目，以及常见的弹性容器属性。通过掌握这些知识，我们可以快速地实现各种布局效果，从而提高我们的工作效率。
示例代码
以下是一个通过 Flexbox 实现的基本网格布局的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ------------
-------
---------- -
-------- -----
---------- -----
---------------- --------------
-
----- -
----- - - ----
-------------- -----
----------------- -----
------ ------
----------- -------
-------- -----
-
--------
-------
------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
-------在这个示例中，我们使用了 .container 声明了一个弹性容器，并使用 flex-wrap 属性实现了自适应布局。同时，我们使用了 justify-content 属性对弹性项目在主轴上的对齐方式进行了配置。最终，我们在样式文件中使用了 .item 定义了弹性项目的样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64dcf9d8f6b2d6eab380c496