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：允许换行，但下一行在上方开始

比如要实现一个自动换行的标签组：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.tags {
  display: flex;
  flex-wrap: wrap;
}

3. 组合使用：flex-flow 简写属性

CSS提供flex-flow作为flex-direction和flex-wrap的简写形式，语法为：

flex-flow: <flex-direction> <flex-wrap>;

例如：

.container {
  flex-flow: row wrap; /* 水平排列，允许换行 */
}

或：

.sidebar {
  flex-flow: column nowrap; /* 垂直排列，不换行 */
}

基本上就这些。掌握flex-direction和flex-wrap，就能应对大多数Flex排列需求。实际开发中建议优先使用flex-flow简写，代码更简洁清晰。