Flexbox 是一个基于 CSS3 的布局模型，旨在为各种屏幕和设备提供定位和对齐的灵活性。Flexbox 容器上的属性控制子元素的布局方式。
Flexbox 基础知识
Flexbox 容器和子项的基本概念
Flexbox 最重要的两个概念是 容器（container） 和 子项（item） 。所谓容器，指的是使用 display: flex 或 display: inline-flex 属性的 HTML 元素。而所谓的子项，就是容器的直接子元素（不包含子元素的子元素）。
理解 Flexbox 容器的部件
Flexbox 容器通常包含两个主要部分：主轴（main axis） 和 交叉轴（cross axis） 。主轴是容器中的主要方向，它取决于 flex-direction 属性的值。如果 flex-direction 设置为 row 或 row-reverse，则主轴是水平方向；如果设置为 column 或 column-reverse，则主轴是垂直方向。交叉轴则是与主轴垂直的另一个轴。
Flexbox 属性
以下是一些常见的 Flexbox 属性和它们的含义。
容器属性
display：设置容器为块级容器或行内容器。flex-direction：设置主轴方向。flex-wrap：设置如何换行。justify-content：设置主轴上的对齐方式。align-items：设置交叉轴上的对齐方式。align-content：设置多行容器的行对齐方式。
项目属性
order：设置项目的排列顺序。flex-grow：设置项目的放大比例。flex-shrink：设置项目的缩小比例。flex-basis：设置项目的基准大小。flex：设置flex-grow、flex-shrink和flex-basis。align-self：设置单个项目在交叉轴上的对齐方式。
Flexbox 示例代码
下面是一个简单的 Flexbox 布局示例：
-- -------------------- ---- -------
------
------
-------
---------- -
-------- -----
---------------- -------------
------------ -------
------- ------
------- --- ----- ------
-
----- -
------ -----
------- -----
----------------- ----------
------- --- ----- ------
-
--------
-------
------
---- ------------------
---- -------------------
---- -------------------
---- -------------------
------
-------
-------这个示例中，我们定义了一个 container 类，将其设置为 Flexbox 容器，并设置了 justify-content 属性为 space-around，这意味着项目应该在主轴上被平均分布，并在它们之间添加空间。我们还将 align-items 属性设置为 center，使 item 项目在交叉轴上居中对齐。最后，我们设置了一些样式和边框。
总结
Flexbox 是一种灵活的布局模型，它为前端开发提供了更多的选择和自由度。掌握 Flexbox 的技能可以提高前端开发者的工作效率和代码质量。在实际应用中，需要根据具体的需求选择合适的属性进行设置，以达到理想的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647078a7968c7c53b0e98c02