flex布局

1： flex-direction: row | row-reverse | column | column-reverse;

用来控制子项整体布局方向 从左至右（row） 从右至左（row-reverse ）从上到下（column）或者从下到上（column-reverse）。

2：flex-wrap： nowrap | wrap | wrap-reverse；

用来控制子项整体单行显示（nowrap）还是换行显示（wrap），如果换行 则在下面一行是否反向显示（wrap-reverse）。

3：flex-flow： <‘flex-direction’> || <‘flex-wrap’>

是 flex-direction和flex-wrap的缩写

4： justify-content: flex-start | flex-end | center |space-between | space-around | space-evenly；

justify-content: 控制主轴方向上子元素的对齐方式

属性决定了水平方向子项的对其和分布方式

针对多行子项们相对于flex容器在垂直向上的对齐方式

5：align-items：stretch | flex-start | flex-end | center | baseline；

align-items:控制侧轴方向上子元素的对齐方式

子项们相对于flex 容器在垂直方向上的对齐方式

针对单行子项们相对于flex容器在垂直向上的对齐方式

6：flex： num；这个元素占用父级宽度的份数

7： order: number ; 调整元素在父级中的位置

8：nth-child(3n+1) {} 指定元素

.item:nth-child(3n+1){

background-color: aliceblue;

}