使用

.父容器 {
  display: flex;
}

子元素排列方向

.父容器 {
  flex-direction: row;
}

属性说明：

• row 水平排列，从左往右（默认值）
• row-reverse 横向排列，从右往左
• column 垂直排列，从上往下
• column-reverse 垂直排列，从下往上

图像说明：

row
1 2 3 4

row-reverse
4 3 2 1

column
1
2
3
4

column-reverse
4
3
2
1

子元素换行方式

.父容器 {
  flex-wrap: nowrap;
}

属性说明：

• nowrap 不换行（默认值）
• wrap 换行，从上往下
• wrap-reverse 换行，从下往上