什么是 Flexbox
Flexbox 是一种用于布局的 CSS3 模块，它提供了一种灵活的方式来排列元素，可以轻松地实现常见的布局需求，如垂直居中、水平居中、等高布局等。它可以自适应不同的屏幕尺寸，也可以适应不同的文本流动方向（比如从右往左的阿拉伯语）。
如何使用 Flexbox
首先，我们需要在容器上应用 display: flex属性，标志着这是一个 flex 容器。如下面的例子：
-- -------------------- ---- -------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
---------- -
-------- -----
-
----- -
------ ------
------- ------
----------- ----
-
--------这段代码创建了一个红色的正方形，共 3 个，但它们默认是按照水平方向排列的。（demo1）
我们可以通过设置 flex-direction属性来指定主轴方向，也就是子元素的排列方向。默认值是 row，表示从左往右排列，我们可以通过将它更改为 column来实现从上往下排列：
.container {
display: flex;
flex-direction: column;
}这样就可以实现从上往下排列了。（demo2）
Flexbox 的属性详解
Flexbox 有很多可以用来控制子元素如何排列的属性，我将简单介绍其中的几个常用属性：
flex-direction: 指定主轴的方向。默认值是row，表示从左往右排列；column表示从上往下排列；row-reverse和column-reverse则表示和对应的默认值方向相反。flex-wrap: 指定子元素是否折行。默认是不折行的(nowrap)，如果希望子元素在一行排不下时自动转行，可以设置成wrap。这时可以再加上两个属性，wrap-reverse表示第一行在容器的底部，第二行在容器的顶部开始排列；wrap表示第一行从容器的顶部开始排列。justify-content: 指定子元素在主轴上的对齐方式。默认值是flex-start，表示左对齐；flex-end表示右对齐；center表示居中对齐；可以使用space-between和space-around等值实现两端对齐和均匀分配缩放空间。align-items: 指定子元素在侧轴上的对齐方式。默认值是stretch，表示沿着侧轴拉伸子元素，实现同一高度；flex-start表示顶部对齐，flex-end表示底部对齐，center表示居中对齐，baseline则表示沿着基线对齐。align-content: 只有在flex-wrap属性为wrap时才有用，指定多行子元素在容器内的对齐方式。默认值是stretch，表示重叠在一起，flex-start表示顶部对齐，flex-end表示底部对齐，center表示居中对齐，space-between和space-around等值实现两端对齐和均匀分配缩放空间。
总结
Flexbox 布局让我们可以用一种简单灵活的方式来排列元素，而不需要依靠复杂的定位和浮动。虽然它有很多的属性，不过这些属性对于解决常见的布局问题来说已经足够，而且很多都可以组合使用。通过这篇文章的学习，你现在已经掌握了 Flexbox 中最基本的用法和属性，期待你在以后的项目中能够愉快地使用它。
示例代码
-- -------------------- ---- -------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
---------- -
-------- -----
--------------- -------
---------------- -------
------------ -------
------- ------
------- --- ----- -----
-
----- -
------ ------
------- ------
----------- ----
------- -----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471f604968c7c53b0fde543