flex-wrap控制子元素是否换行及方向，flex-flow是flex-direction与flex-wrap的简写，可同时设置主轴方向和换行行为，如flex-flow: row wrap；推荐使用flex-flow合并定义以简化代码。
flex-wrap 和 flex-flow 都是 CSS Flexbox 布局中的重要属性，它们可以单独使用，也可以结合使用来更灵活地控制弹性容器中子元素的换行与排列方式。
flex-wrap 的作用
flex-wrap 决定弹性项目是否换行以及换行的方向：
• nowrap（默认）：所有项目都在一行或一列显示，不换行。• wrap：允许换行，后续行在主轴方向下方添加。
• wrap-reverse：允许换行，但行的排列方向与 wrap 相反（例如从下往上堆叠）。
例如：
<font>container {
display: flex;
flex-wrap: wrap;
}</font>flex-flow 的作用
flex-flow 是 flex-direction 和 flex-wrap 的简写属性，用于同时设置主轴方向和换行行为。
立即学习“前端免费学习笔记（深入）”；
语法格式为：
<font>flex-flow: <flex-direction> <flex-wrap>;</font>
常用值组合包括：
• flex-flow: column nowrap;
• flex-flow: row-reverse wrap-reverse;
实际使用示例
假设我们有一个容器，希望子项从左到右排列，并在空间不足时自动换行：
<font>.container {
display: flex;
flex-flow: row wrap;
}</font>如果想让项目先从上到下排列，再在列之间换行（垂直布局+换行），可以这样写：
<font>.container-vertical {
display: flex;
flex-flow: column wrap;
}</font>注意：当使用 column 作为主轴方向时，wrap 表示“横向分列”，即在垂直方向填满后向右添加新列。
何时用 flex-flow 而不是单独设置？
当你需要同时定义方向和换行时，使用 flex-flow 更简洁。比如：
<font>/* 推荐写法 */ flex-flow: row wrap; <p>/<em> 等价于下面两行 </em>/ flex-direction: row; flex-wrap: wrap;</font>
代码更紧凑，适合快速定义布局结构。
基本上就这些。合理使用 flex-flow 可以简化样式代码，而 flex-wrap 单独使用则更适合只调整换行行为的场景。两者结合的关键在于理解 flex-flow 已经包含了 flex-wrap 的功能。
