一、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 20px

grid-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属性的合并简写形式