flex布局，grid布局

flex布局
flex-direction
设置主轴是横向还是纵向
justify-content
主轴对齐方式
align-items
交叉轴对其方式
flex-wrap
设置单行或多行
align-content
多行状态下交叉轴对齐
flex-grow 成长宽度
flex-shrink 成长缩小

display: grid;
grid-template-columns/grid-template-rows
设置行列，可以直接指定宽度，可以用fr,可以用repeat(次数，宽度),repeat的次数可以用auto-fill表示尽可多的容纳
还可以用minmax(最小，最大)来设置行/列的最小最大值，或者auto填充宽度

grid-gap/grid-row-gap/grid-column-gap
设置行列间距

grid-template-areas
定义区域，给区域起名字。和网格元素的grid-area一起使用，确定网格元素将要分配到的区域

grid-auto-flow
确定元素怎么排列，先行后列或者先列后行。可以使用dense 是元素尽量填充空白位置

justify-items/align-items
设置单元格内容水平，垂直位置。默认是stretch，拉伸填满单元格

justify-content/align-content
设置单元格水平，垂直位置。默认是stretch，拉伸填满grid容器

grid-auto-columns/grid-auto-rows
设置隐式网格

grid-column-start/grid-column-end/grid-row-start/grid-row-end
设置元素的行/列的起始/结束线

justify-self/align-self
作用于单个单元格，设置单元格内容的水平/垂直位置

flex布局参考
http://jack.jackafan.top/zsd/css/flex/
grid布局参考
https://juejin.cn/post/6854573220306255880