1、flexbox（弹性盒布局模型）
Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局。采用Flex布局的元素，称为flex容器container。它的所有子元素自动成为容器成员，称为flex项目item。
容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向。
关于flex常用的属性，我们可以划分为容器属性和容器成员属性。
容器属性
1）flex-direction
决定主轴的方向(即项目的排列方向)。
属性对应如下：
a、row（默认值）：主轴为水平方向，起点在左端。
b、row-reverse：主轴为水平方向，起点在右端。
c、column：主轴为垂直方向，起点在上沿。
d、column-reverse：主轴为垂直方向，起点在下沿。
2）flex-wrap
弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行。
属性对应如下：
a、nowrap（默认值）：不换行。
b、wrap：换行，第一行在上方。
c、wrap-reverse：换行，第一行在下方。
默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩。会自动缩小盒子宽度使其一行显示，缩小最小范围为父元素的宽度。
当设置为 flex-wrap: wrap; 就是换行。
flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
3）justify-content
定义了项目在主轴上的对齐方式。
属性对应如下：
a、flex-start（默认值）：左对齐。
b、flex-end：右对齐。
c、center：居中。
d、space-between：两端对齐，项目之间的间隔都相等。
e、space-around：两个项目两侧间隔相等。
4）align-items
定义项目在交叉轴上如何对齐。
属性对应如下：
a、flex-start：交叉轴的起点对齐
b、flex-end：交叉轴的终点对齐
c、center：交叉轴的中点对齐
d、baseline: 项目的第一行文字的基线对齐
e、stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
如果flex-items没有定义高度，在垂直方向上默认会拉伸和父盒子一样的高度。也就是align-items：stretch、normal。
5）align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
属性对应如吓：
a、flex-start：与交叉轴的起点对齐。
b、flex-end：与交叉轴的终点对齐。
c、center：与交叉轴的中点对齐。
d、space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
e、space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
f、stretch（默认值）：轴线占满整个交叉轴。
容器属性
1）order
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
2）flex-grow
上面讲到当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定。定义项目的放大比例（容器宽度>元素总宽度时如何伸展），默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3）flex-shrink
定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
4）flex-basis
设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。
浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定。
当设置为0的是，会根据内容撑开。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
5）flex
flex是flex-grow、flex-shrink、flex-basis的缩写。
flex-grow 定义项目的的放大比例，用来“瓜分”父项的“剩余空间”。当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何索取分配父元素的剩余空间。值越大，索取的越厉害。
a、默认为0，即 即使存在剩余空间，也不会放大；
b、所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
c、flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
flex-shrink 定义项目的缩小比例，用来“吸收”超出的空间。父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。值越大，减小的越厉害。
a、默认为1，即 如果空间不足，该项目将缩小；
b、所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
c、flex-shrink为0：空间不足时，该项目不会缩小；
d、flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis 用于设置子项的占用空间，在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。该属性用来设置元素的宽度，其实，width也可以设置宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。
a、默认值为auto，即 项目原本大小；
b、设置后项目将占据固定空间。
flex 的不同取值
a、flex属性的默认值为：0 1 auto （不放大会缩小）；
b、flex为none：0 0 auto （不放大也不缩小）；
c、flex为auto：1 1 auto （放大且缩小）；
d、flex为一个非负数字n：该数字为flex-grow的值。
flex：n；=== flex-grow：n；flex-shrink：1；flex-basis：0%；
e、flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值。
flex：n1 n2; === flex-grow：n1；flex-shrink：n2；flex-basis：0%；
f、flex为一个长度或百分比L：视为flex-basis的值，
flex: L; === flex-grow：1；flex-shrink：1；flex-basis：L；
g、flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值。
flex：n L；=== flex-grow：n；flex-shrink：1；flex-basis：L;
flex：1即为flex-grow：1，自动放大占满剩余空间。
6）align-self
许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
2、网格布局
Grid 布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。
设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法。
Grid 布局属性可以分为两大类：容器属性，项目属性。
容器属性
1）display 属性
在元素上设置display：grid 或 display：inline-grid来创建一个网格容器。
a、display：grid 则该容器是一个块级元素；
b、display：inline-grid 则容器元素为行内元素。
2）grid-template-columns 属性，grid-template-rows 属性
grid-template-columns：属性设置列宽；
grid-template-rows：属性设置行高。
以上表示固定列宽为 200px 200px 200px，行高为 50px 50px。
上述代码可以看到重复写单元格宽高，通过使用repeat()函数，可以简写重复的值：
a、第一个参数是重复的次数；
b、第二个参数是重复的值。
grid-template-columns：200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。fr：片段，为了方便表示比例关系。
grid-template-columns: 100px auto 100px表示第一第三列为 100px，中间由浏览器决定长度。
3）grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式。
grid-row-gap: 10px 表示行间距是 10px
grid-column-gap: 20px 表示列间距是 20px
grid-gap: 10px 20px等同上述两个属性。
4）grid-auto-flow 属性
容器的子元素会按照顺序，自动放置在每一个网格。顺序就是由grid-auto-flow决定，默认为行，代表"先行后列"，即先填满第一行，再开始放入第二行。
当修改成column后
5）justify-items 属性， align-items 属性， place-items 属性
justify-items 属性设置单元格内容的水平位置（左中右）；
align-items 属性设置单元格的垂直位置（上中下）。
place-items属性是align-items属性和justify-items属性的合并简写形式。
属性值
a、start：对齐单元格的起始边缘
b、end：对齐单元格的结束边缘
c、center：单元格内部居中
d、stretch：拉伸，占满单元格的整个宽度（默认值）
6）justify-content 属性， align-content 属性， place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右）；
align-content属性是整个内容区域的垂直位置（上中下）。
属性值有：
a、start - 对齐容器的起始边框；
b、end - 对齐容器的结束边框；
c、center - 容器内部居中；
e、space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍；
f、space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔；
g、space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔；
h、stretch - 项目大小没有指定时，拉伸占据整个网格容器。
.
项目属性
1）grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
grid-column-start 属性：左边框所在的垂直网格线
grid-column-end 属性：右边框所在的垂直网格线
grid-row-start 属性：上边框所在的水平网格线
grid-row-end 属性：下边框所在的水平网格线
通过设置grid-column属性，指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线
2）justify-self 属性、align-self 属性以及 place-self 属性
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目