flex direction 排列方式

"flex-direction" 是一个CSS属性，用于指定Flex容器中flex项目的排列方向。

该属性接受以下四个值：

1. row：flex项目将水平排列，第一行在左侧开始，向右增长。

2. row-reverse：flex项目将水平排列，第一行在右侧开始，向左增长。

3. column：flex项目将垂直排列，第一列在顶部开始，向下增长。

4. column-reverse：flex项目将垂直排列，第一列在底部开始，向上增长。

相关问题

flex direction wrap

flex direction wrap 是指flex布局中的主轴方向和换行方式的组合。其中，flex-direction属性用于指定主轴的方向，可以取值为row、row-reverse、column、column-reverse。而flex-wrap属性用于控制项目在一行排不下时是否换行，可以取值为nowrap、wrap、wrap-reverse。

如果flex-direction为row或row-reverse，表示主轴方向是水平的，项目按照水平方向排列。如果flex-wrap为wrap，表示在一行排不下的情况下，项目会换行排列。如果flex-wrap为wrap-reverse，表示在一行排不下的情况下，项目会反向换行排列。

如果flex-direction为column或column-reverse，表示主轴方向是垂直的，项目按照垂直方向排列。如果flex-wrap为wrap，表示在一列排不下的情况下，项目会换行排列。如果flex-wrap为wrap-reverse，表示在一列排不下的情况下，项目会反向换行排列。

flex-direction

flex-direction是CSS中用来设置flex容器中伸缩项目（flex items）在主轴（main axis）方向的排列方式的属性。它有以下四个可能的值：

- row：默认值，表示伸缩项目在主轴方向从左到右排列（水平方向）；
- row-reverse：表示伸缩项目在主轴方向从右到左排列（水平方向）；
- column：表示伸缩项目在主轴方向从上到下排列（垂直方向）；
- column-reverse：表示伸缩项目在主轴方向从下到上排列（垂直方向）。

示例代码：

.container {
  display: flex;
  flex-direction: row; /* 默认值 */
}

.container-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.container-vertical {
  display: flex;
  flex-direction: column;
}

.container-vertical-reverse {
  display: flex;
  flex-direction: column-reverse;
}