flex默认属性：
- row 元素摆放的方向和文字方向一致。
- row-reverse 元素摆放的方向和文字方向相反。
- column 元素从上放到下。
- column-reverse 元素从下放到上。
justify-content： 对齐-内容
- flex-start（default） 元素和容器的起点端对齐。
- flex-end 元素和容器的终点端对齐。
- center 元素在容器里居中。
- space-between 元素之间保持相等的距离,首个元素放置于起点末尾元素放置于终点
- space-around 元素周围保持相等的距离(共3个元素，每个元素有2侧空隙，共6个空隙平分1380)
- space-evenly 均匀排列每个元素,每个元素之间的间隔相等
align-items： 对齐-条目
- flex-start 元素与容器的顶部对齐。
- flex-end 元素与容器的底部对齐。
- center 元素纵向居中。
- baseline 元素在容器的基线位置显示。
- stretch(default) 元素被拉伸以填满整个容器。
order
有时候仅仅调转行或列的方向是不够的。在这些情况，我们可以设置单个元素的order属性。元素的属性默认值为0，但是我们设置这个属性为正数或负数。
align-self可以使用控制单个元素的属性。这个属性接受和align-items一样的那些值。
- nowrap 所有的元素都在一行。
- wrap 元素自动换成多行。
- wrap-reverse 元素自动换成逆序的多行。
flex-flow
flex-direction和flex-wrap两个属性经常会一起使用，所以有缩写属性flex-flow。这个缩写属性接受两个属性的值，两个值中间以空格隔开。
举个例子，你可以用flex-flow: row wrap去设置行并自动换行。
align-content
决定行距
- flex-start 多行都集中在顶部。
- flex-end 多行都集中在底部。
- center 多行居中。
- space-between 行与行之间保持相等距离。
- space-around 每行的周围保持相等距离。
- stretch 每一行都被拉伸以填满容器。
grid-column-start
指定网格项在网格列中的起始位置，后面加数字即可（正数表示从左边数，负数从右边）。
grid-column-end
指定网格项在网格列中的结束位置的下一个，后面加数字即可。
注：
- 也可加span n表示要扩展n格，n只能为正数,并且起始和终止必须有一个已知。
- 当end后面比start后面数字大时，会默认交换这两个数字。
grid-column
它可以一次接受两个值，只要用'/'分开就好。比如说：grid-column: 2 / 4;就会设置网格项从第二列开始，到第四列结束。
grid-row-start
grid-row-end
grid-row
grid-area
接受四个参数，左上角坐标和右下角坐标
grid-template-columns
后面接百分数、比例fr、像素(px)或em这样的长度单位，表示有几列，每一列占总宽度的多少
注意：当列的宽度采用像素，百分比或者em的单位的时候，其他使用fr单位设置的列将会平分剩下的空间。
grid-template-rows
后面接百分数、比例fr、像素(px)或em这样的长度单位，表示有几行，每一行占总高度的多少
注意如上。
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-template
先行后列，用空格和/隔开