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