CSS Flexbox 解惑：flex-wrap 和 flex-flow 的区别
在日常的前端布局工作中，Flexbox 技术已经被广泛应用。而其中两个常用的属性分别是 flex-wrap 和 flex-flow，这两个属性在初学者中往往会混淆。在本文中，我们将会详细探讨这两个属性的区别以及使用方法。
flex-wrap
flex-wrap 属性用于指定 Flexbox 容器中的子项如何排列。默认情况下，Flexbox 容器将尽可能地将所有子项排列在一行上。然而，当一行无法容纳所有子项时，就需要使用 flex-wrap 来将子项换行。具体语法如下：
flex-wrap: nowrap | wrap | wrap-reverse;
其中，nowrap 表示所有子项在一行上显示，wrap 表示子项可以换行，而 wrap-reverse 则表示从下到上排列。
另外，我们也可以配合 justify-content 和 align-items 属性来控制子项的排列方式。例如，我们可以使用 justify-content: center 和 align-items: center 将所有子项居中对齐。
下面这个示例展示了 flex-wrap 的使用方法：
-- -------------------- ---- -------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
---------- -
-------- -----
---------- -----
---------------- -------
------------ -------
-
----- -
------ ------
------- ------
------- -----
----------------- -----
---------- -----
----------- -------
------------ ------
-
--------上面这个示例中，我们将 Flexbox 容器设置为 flex-wrap: wrap，同时设置了 justify-content: center 和 align-items: center 将所有子项居中对齐。当容器的宽度无法容纳所有子项时，子项就会按照 flex-wrap 的设置进行换行。
flex-flow
flex-flow 属性是 flex-wrap 和 flex-direction 属性的简写形式。它用于同时指定这两个属性的值。具体语法如下：
flex-flow: <flex-direction> <flex-wrap>;
其中，<flex-direction> 表示子项的排列方向，可以取值为 row（默认值，表示水平排列）、row-reverse（表示反向水平排列）、column（表示垂直排列）、和 column-reverse（表示反向垂直排列）。而 <flex-wrap> 则表示子项的排列方式，可以取值为 nowrap、wrap、和 wrap-reverse。
下面这个示例展示了 flex-flow 的使用方法：
-- -------------------- ---- -------
---- ------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
---------- -
-------- -----
---------- ------ -----
---------------- -------
------------ -------
-
----- -
------ ------
------- ------
------- -----
----------------- -----
---------- -----
----------- -------
------------ ------
-
--------在这个示例中，我们将 Flexbox 容器设置为 flex-flow: column wrap，同时设置了 justify-content: center 和 align-items: center 将所有子项居中对齐。由于 flex-direction 取值为 column，因此所有子项在垂直方向上排列，而由于 flex-wrap 取值为 wrap，因此当容器的高度无法容纳所有子项时，子项就会按照 flex-wrap 的设置进行换行。
总结
在实际工作中，flex-wrap 和 flex-flow 经常用于控制 Flexbox 容器中子项的排列方式。正确认识它们的区别，选择合适的属性进行设置，有助于提高前端布局效率并优化用户体验。
在使用 flex-wrap 时，我们需要注意设置 justify-content 和 align-items 属性来控制子项的排列方式，以及配合使用其他属性以达到更好的效果。而在使用 flex-flow 时，则可以通过简写形式方便地同时控制排列方向和排列方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cd4e861519ea946c125727