Flex布局中子元素排列由flex-direction和flex-wrap控制。1. flex-direction设置主轴方向：row（默认，左到右）、row-reverse（右到左）、column（上到下）、column-reverse（下到上），如菜单垂直排列用column。2. flex-wrap控制换行：nowrap（不换行，默认）、wrap（换行，下一行在下方）、wrap-reverse（换行，下一行在上方），如标签组常用wrap实现自动换行。3. flex-flow为两者的简写属性，格式为“flex-direction flex-wrap”，如flex-flow: row wrap表示水平排列且允许换行，flex-flow: column nowrap表示垂直排列不换行。推荐使用flex-flow提升代码简洁性。
Flex布局中，子元素的排列方式主要由容器的flex-direction和flex-wrap属性控制。通过合理设置这两个属性，可以灵活实现不同方向的排列与换行效果。
1. 设置主轴方向：flex-direction
该属性决定子元素在容器中的主轴排列方向，有四个常用值：
- row：默认值，从左到右水平排列（适用于LTR文本方向）
- row-reverse：从右到左水平排列
- column：从上到下垂直排列
- column-reverse：从下到上垂直排列
例如，想让菜单项垂直堆叠显示，可设置：
.container {
display: flex;
flex-direction: column;
}2. 控制是否换行：flex-wrap
默认情况下，Flex子元素会强制在一行内显示。当内容过宽时，可通过flex-wrap控制换行行为：
- nowrap：不换行，所有子元素挤在一行（默认）
- wrap：允许换行，下一行在下方开始
- wrap-reverse：允许换行，但下一行在上方开始
比如要实现一个自动换行的标签组：
.tags {
display: flex;
flex-wrap: wrap;
}3. 组合使用：flex-flow 简写属性
CSS提供flex-flow作为flex-direction和flex-wrap的简写形式，语法为：
flex-flow:;
例如：
.container {
flex-flow: row wrap; /* 水平排列，允许换行 */
}或：
.sidebar {
flex-flow: column nowrap; /* 垂直排列，不换行 */
}基本上就这些。掌握flex-direction和flex-wrap，就能应对大多数Flex排列需求。实际开发中建议优先使用flex-flow简写，代码更简洁清晰。
