flex-flow 属性

Docs

flex-flow 属性用于设置容器的主轴方向和换行方式，它是 flex-direction 和 flex-wrap 两个属性的缩写。

flex-flow = <'flex-direction'> || <'flex-wrap'>
顺序任何，并且都可以省略
flex-direction 可以设置容器的主轴方向。
- row：默认值。主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap 可以设置容器内部的元素如何换行。
- nowrap：默认值。不换行。
- wrap：换行，第一行在上方。
- wrap-reverse：换行，第一行在下方。

.container {
  display: flex; /* 将 .container 元素设置为一个弹性容器 */
  flex-flow: row wrap; /* 设置主轴方向为 row，换行方式为 wrap (主轴方向为水平方向，起点在左端，元素可以换行，第一行在上方) */
}