一、flex布局
1. 容器属性
display
指定容器的布局方式
flex 指定容器为flex布局，默认为容器为块级元素
inline-flex 行内块的布局flex-direction
指定主轴方向(默认row)
row 主轴为水平方向，起点在左端
row-reverse 主轴为水平方向，起点在右端
column 主轴为垂直方向，起点在上沿
column-reverse 主轴为垂直方向，起点在下沿flex-wrap
指定是否换行(默认不换行)
nowrap 不换行
wrap 换行，第一行在上方
wrap-reverse 换行，第一行在下方flex-flow
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
<flex-direction> || <flex-wrap>justify-content
属性定义了项目在主轴上的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍align-items
属性定义了项目在侧轴上的对齐方式
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch 轴线占满整个交叉轴2. 项目属性
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow
属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex
属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
align-self
属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
auto 与容器属性align-items一致
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度二、grid布局
1. 容器属性
display
指定容器的布局方式
grid 指定容器布局属性，默认为容器为块级元素
inline-grid 行内块的布局grid-template-columns
属性定义每一列的列宽
100px 100px 100px 使用像素定义
33.33% 33.33% 33.33% 使用百分比定义
1fr 1fr 1fr 使用fr，表示比例
repeat(3, 33.33%) 使用repeat函数，第一个参数是重复的次数，第二个参数是所要重复的值grid-template-rows
属性定义每一行的行高
属性值同grid-template-columns属性值
grid-template-areas
属性用于定义区域
'a a a'
'b b b'
'c c c'
"header header header"
"main main sidebar"
"footer footer footer"grid-row-gap
设置行与行的间隔（行间距）
grid-column-gap
设置列与列的间隔（列间距）
grid-gap
grid-column-gap和grid-row-gap的合并简写形式
20px 20pxgrid-auto-flow
设置容器的子元素排列顺序
默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
row 先行后列
column 先列后行
row dense 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格
column dense 表示"先列后行"，并且尽量填满空格justify-items
设置单元格内容的水平位置（左中右）
start 对齐单元格的起始边缘
end 对齐单元格的结束边缘
center 单元格内部居中
stretch 拉伸，占满单元格的整个宽度（默认值）align-items
设置单元格内容的垂直位置（上中下）
属性值同justify-items属性值
place-items
是align-items属性和justify-items属性的合并简写形式
justify-content
整个内容区域在容器里面的水平位置（左中右）
start 对齐容器的起始边框
end 对齐容器的结束边框
center 容器内部居中
stretch 项目大小没有指定时，拉伸占据整个网格容器
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔align-content
整个内容区域的垂直位置（上中下）
同justify-content属性值
place-content
是align-content属性和justify-content属性的合并简写形式
2. 项目属性
grid-column-start
左边框所在的垂直网格线
grid-column-end
右边框所在的垂直网格线
grid-row-start
上边框所在的水平网格线
grid-row-end
下边框所在的水平网格线
grid-column
是grid-column-start和grid-column-end的合并简写形式
grid-row
是grid-row-start属性和grid-row-end的合并简写形式
grid-area
指定项目放在哪一个区域
justify-self
设置单元格内容的水平位置（左中右）
align-self
设置单元格内容的垂直位置（上中下）
start 对齐单元格的起始边缘。
end 对齐单元格的结束边缘。
center 单元格内部居中。
stretch 拉伸，占满单元格的整个宽度（默认值）。place-self
align-self属性和justify-self属性的合并简写形式