什么是 Flexbox 布局
Flexbox 布局是一种新的布局方式，其全称为弹性布局，也叫做伸缩布局（Flexible Box），简称 flex 布局。它通过对容器和容器内的子元素进行定义块级或者行级元素的分配，实现页面元素间的自适应排列调整。
它的出现解决了传统布局方式所面对的很多问题，比如垂直居中、等高布局等。而且相比于传统布局方式，Flexbox 布局更加灵活、快捷、高效。Flexbox 布局目前已被主流浏览器大多数支持。
如何实现等高列布局
等高列布局是一种通常应用于网页中，要求多个元素列高度相同的布局方式，通过这种布局方式来达到美化页面的目的。而传统布局方式中要实现等高列布局是比较困难的，而且通常需要使用到 JavaScript 来动态计算元素的高度。但是，使用 Flexbox 布局来实现等高列布局就会变得十分简单和高效。
下面是一个使用 Flexbox 布局来实现等高列布局的示例代码，你可以通过演示区改变预设的数量和内容，查看弹性盒子布局的动态效果：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
-------------- ---- -- --------------------
-------
---- -
------- --
-
---------- -
------ ----
------- ---- -----
-------- -----
---------------- -------
-
----- -
------ ----
------- - -----
----------------- --------
-------- -----
-
----- -- -
---------- ------
-------------- -----
-
--------
-------
------
---- ------------------
---- -------------
--------------
---
-----------------------------------
-----------------------------------
-----------------------------------
----
------
---- -------------
--------------
---
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
----
------
---- -------------
--------------
---
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
-----------------------------------
----
------
------
-------
-------如何解决等高列布局中的问题
实践中我们通常会发现，有时候想要对其中的列进行个性化的排列时，采用普通的 Flex 布局方式可能会出现一些问题。这时候我们可以采用常用的一些技巧来解决这些问题。下面我们来一一介绍。
使用内边距解决等高列布局的问题
在等高列布局中，如果希望在外层数量不够的情况下，内层内容可以自适应，我们通常会将类似于内边距等属性设置到子元素中，如下所示：
.item {
padding: 20px;
box-sizing: border-box;
}这样即可在不改变外层高度的前提下，实现内层多个内容自适应的效果。
使用 min-height 和 flex 布局解决等高列布局的问题
在等高列布局中，如果希望在数量较少时保证高度一直，通常可以通过设置 min-height 和 flex 布局属性来实现。具体实现代码如下：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ----- - ---------- -- -- ------- -- ----------- ------ -------- ----- ---------------- ------- -- ---- -- --------------- ------- -- ------ -- -
这样，即可在数量少时保证高度不会出现偏差的情况。
使用组合方式解决等高列布局的问题
在等高列布局中，如果希望保持列的数量并不改变的情况下，我们可以通过代码的组合方式来实现相应的效果。具体实现方式如下：
.item {
display: flex; /* 容器 display:flex; */
flex-flow: column nowrap; /* 必须设置为这个 */
}
.item .sub-item {
flex: 1 1 auto; /* 将子元素持续自适应到最大高度 */
}这样就可以在等高列布局中保持布局的数量不变的情况下，达到相应的效果。
总结
Flexbox 布局在实现等高列布局时，无论是在方便性、简洁性还是灵活性方面都具有极大的优势，可以针对业务需求对 Flexbox 布局进行相应的变形实现，如内边距解决问题、min-height 和 flex 布局解决等高布局的问题，以及采用组合方式解决等高列布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647004ea968c7c53b0e2c812