引言
在前端开发中，布局是一个非常重要的环节。为了适应不同屏幕的大小和设备类型，我们需要用一些布局技巧来达到适配的效果。在过去，我们使用浮动（float）来布局，但是这种方式存在很多问题，比如无法居中、无法等高等。CSS3 Flexbox 布局的出现，让开发者们告别了浮动，用更加优雅简单的方式来实现布局，同时使代码更加容易维护和修改。
什么是 Flexbox
CSS3 Flexbox 布局是一个弹性盒子模型，用于在一个容器内横向和纵向对齐和分布元素。其允许开发者更加灵活地进行布局，控制子元素在容器中的位置和大小，最重要的是，兼容性良好。
Flexbox 布局分为容器（Flex container）和子元素（Flex item）两部分。
容器（Flex container）
在 CSS3 中使用以下代码来创建一个 Flexbox 容器：
---------- -
-------- -----
-在这个容器中，所有子元素都可以按照一定的规则进行排列。
子元素（Flex item）
在 Flexbox 中，子元素是指容器中需要进行排列的元素。使用以下代码来定义一个子元素：
----- -
----- --
-通过将 flex 属性设置为一个数值，我们可以设置子元素在容器中的空间比例。比如，当我们将所有子元素设置为 flex: 1; 时，所有子元素会均分容器的空间，而当我们将其中一个子元素设置为 flex: 2; 时，该子元素会占据容器的两倍空间。
Flexbox 的常用属性
flex-direction
flex-direction 属性用于控制 Flexbox 的主轴（main axis）方向。默认值为 row，即主轴方向为从左往右，可以设置为以下值：
row：主轴方向从左到右。column：主轴方向从上到下。row-reverse：主轴方向从右到左。column-reverse：主轴方向从下到上。
---------- -
-------- -----
--------------- -------
-justify-content
justify-content 属性用于控制 Flexbox 中子元素在主轴上的对齐方式。可以设置为以下值：
flex-start：子元素在主轴上左对齐。flex-end：子元素在主轴上右对齐。center：子元素在主轴上居中对齐。space-between：子元素在主轴上等间距排列，第一个子元素居左，最后一个子元素居右。space-around：子元素在主轴上等间距排列，子元素两侧留有相等的空间。
---------- -
-------- -----
---------------- -------
-align-items
align-items 属性用于控制 Flexbox 中子元素在交叉轴（cross axis）上的对齐方式。可以设置为以下值：
flex-start：子元素在交叉轴上顶对齐。flex-end：子元素在交叉轴上底对齐。center：子元素在交叉轴上居中对齐。baseline：子元素在交叉轴上以第一行文字的基线对齐。stretch：子元素在交叉轴上拉伸，占据整个交叉轴长度。
---------- -
-------- -----
------------ -------
-flex-wrap
flex-wrap 属性用于控制 Flexbox 中子元素是否换行。可以设置为以下值：
nowrap：不换行。wrap：换行，子元素会自动从上一行移到下一行。wrap-reverse：反向换行，第一行在最下方。
---------- -
-------- -----
---------- -----
-align-content
align-content 属性用于控制 Flexbox 中多行子元素在交叉轴上的对齐方式。只有在存在多行子元素时才有意义，可以设置为以下值：
flex-start：多行子元素在交叉轴上顶对齐。flex-end：多行子元素在交叉轴上底对齐。center：多行子元素在交叉轴上居中对齐。space-between：多行子元素在交叉轴上等间距排列，第一行在顶部，最后一行在底部。space-around：多行子元素在交叉轴上等间距排列，各行两侧留有相等的空间。stretch：子元素在交叉轴上拉伸，占据整个交叉轴长度。
---------- -
-------- -----
---------- -----
-------------- -------
-实例演示
横向排列
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---------------- -
-------- -----
-
----- -
----- --
----------- -------
-------- -----
-纵向排列
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---------------- -
-------- -----
--------------- -------
-
----- -
----- --
----------- -------
-------- -----
-等分排列
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---------------- -
-------- -----
-
----- -
----- --
----------- -------
-------- -----
-居中排列
---- ------------------
---- ----------------- -------
---- ----------------- -------
---- ----------------- -------
---------------- -
-------- -----
---------------- -------
------------ -------
-
----- -
----------- -------
-------- -----
-总结
Flexbox 布局是一个非常实用、灵活的布局方式，相比于传统的浮动方式，其具有更多的控制能力，同时也更加简单易懂。使用 Flexbox 布局，可以让我们轻松地布局网页，实现页面适配，提高开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65ac544cadd4f0e0ff5eae57