Flex 布局
布局原理
弹性布局 flex (flexible box的缩写)，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。
采用flex布局的元素称为 flex 容器 (flex container)，它的所有子元素自动成为容器成员，称为 flex 项目 (flex item)。
- 当为父元素指定为 flex 布局后，子元素的 float、clear、vertical-align 属性将失效。
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
常见 flex 容器属性
以下属性是对父元素设置的。
| 属性 | 描述 |
|---|---|
| flex-direction | 设置主轴的方向 |
| justify-content | 设置主轴上的子元素排列方式 |
| flex-wrap | 设置子元素是否换行 |
| align-items | 设置侧轴上的子元素的排列方式（单行） |
| align-content | 设置侧轴上的子元素的排列方式（多行） |
| flex-flow | 复合属性，相当于同时设置flex-dirextion和flex-wrap |
flex-direction
1. 主轴与侧轴
在flex布局中，分为主轴和侧轴两个方向，同样的叫法：行和列，X轴和Y轴。
默认：主轴水平向右，侧轴垂直向下。
2. 属性值
flex-direction 属性决定了主轴的方向（项目的排列方向）。
主轴和侧轴是会变化的，由 flex-direction 指定主轴的方向，剩下的就是侧轴，子元素就是跟着主轴来排列的。
| 属性 | 描述 |
|---|---|
| row | 默认值，从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
justify-content
justify-content 属性设置了项目在主轴上的排列方式，在定义项目排列方式之前一定要先确定主轴。
| 属性值 | 描述 |
|---|---|
| flex-start | 默认值，从头开始，如果主轴是X轴，则从左往右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴上居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
flex-wrap
flex-wrap 属性设置项目是否换行，默认是不换行的，当项目大小超出容器时，会强制缩小项目大小，使得在一行显示。
| 属性值 | 描述 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
align-items
align-items 属性设置侧轴上的单行项目的排列方式。
| 属性值 | 描述 |
|---|---|
| flex-start | 默认值，从头开始排列 |
| flex-end | 从尾部开始排列 |
| center | 在侧轴上居中对齐 |
| stretch | 拉伸（当子元素没有给定高度时） |
align-content
align-content 属性设置侧轴上的多行项目（项目换行）的排列方式。单行情况下无效。
| 属性值 | 描述 |
|---|---|
| flex-start | 默认值，从头开始排列 |
| flex-end | 从尾部开始排列 |
| center | 在侧轴上居中对齐 |
| space-around | 在侧轴上，平分剩余空间 |
| space-between | 在侧轴上，先两边贴边，再平分剩余空间 |
| stretch | 设置子元素高度平分父元素高度 |
flex-flow
flex-flow 是复合属性，相当于同时设置 flex-dirextion 和 flex-wrap。
常见 flex 项目属性
flex
flex属性定义项目分配剩余空间，用 flex 来表示占多少份数。
align-self
align-self 单独控制某个项目自己在侧轴上的排列方式。
| 属性值 | 描述 |
|---|---|
| auto | 默认。继承其父元素的 align-items 属性，如果没有父元素，则为 “stretch”。 |
| flex-start | 位于侧轴的开头 |
| flex-end | 位于侧轴的末端 |
| center | 位于侧轴的中央 |
| stretch | 拉伸（当子元素没有给定高度时） |
order
order 属性设置子元素的排列顺序，数值越小，排列越靠前，默认是0。
注意：与 z-index 不一样。
Grid 布局
Flex 布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局，Grid 布局比 Flex 布局更强大、更灵活，但兼容性不如 Flex 好。
常见 grid 容器属性
grid-template-columns / grid-template-rows
grid-template-columns 属性可以设置列数及列宽，grid-template-rows 属性可以设置行数及行高。
1. 固定的列宽和行高
grid-template-columns: 100px 100px 100px; 三列 100px
grid-template-rows: 100px 100px 100px 100px; 四行 100px
2. repeat() 函数
第一个参数是重复的次数，第二个参数是所要重复的值。
grid-template-columns: repeat(3, 100px); 等于 grid-template-columns: 100px 100px 100px;
3. auto-fill 关键字
表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。
grid-template-columns: repeat(auto-fill, 200px); 表示列宽是 200px，但列的数量不固定，会自动填充，填充满一行才会换行。
4. fr 关键字
fr（fraction 的缩写，意为"片段"），给单元格分配容器的剩余空间，用 fr 来表示占多少份数。
grid-template-columns: 200px 1fr 2fr; 表示第一个列宽设置为 200px，后面两列的宽度分别为剩余宽度的 1/3 和 2/3。
5. minmax() 函数
minmax() 函数给单元格设置一个最小尺寸和最大尺寸。
grid-template-columns: 1fr 1fr minmax(300px, 2fr); 表示第三列的列宽最小为 300px，最大为第一第二列宽的两倍。
6. auto 关键字
由浏览器决定长度。通过 auto 关键字，可以轻易实现两列列或者三列布局。
grid-template-columns: 100px auto 100px; 表示第一第三列为 100px，中间的宽度由浏览器决定，自动填充。
7. 网格线
可以用方括号定义网格线名称，方便以后的引用。网格线在布局中是隐藏的且没有宽度。
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4]; 用4根网格线布置在列的两侧。
grid-row-gap / grid-column-gap / grid-gap
grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。
grid-gap 属性是两者的简写形式。
grid-row-gap: 10px; grid-column-gap: 20px; 等于 grid-gap: 10px 20px;
grid-template-areas
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成。
grid-template-areas: "a b c" "d e f" "g h i";
grid-template-areas: "a a a" "b b b" "c c c";
grid-template-areas: "a . c" "d . f" "g . i";
区域不需要利用，则用 . 表示。
区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。
grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格中。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行。
grid-auto-flow: row; 先行后列
grid-auto-flow: row; 先列后行
grid-auto-flow: row dense; 尽可能填满单元格
justify-items(水平方向) / align-items (垂直方向)/ place-items
justify-items 属性设置单元格内容水平方向的对齐方式。
align-items 属性设置单元格内容垂直方向的对齐方式。
place-items 属性是两者的简写形式。
| 属性值 | 描述 |
|---|---|
| start | 项目贴着单元格起始边缘对齐 |
| end | 项目贴着单元格结束边缘对齐 |
| center | 项目在单元格内部居中对齐 |
| stretch | 默认值，占满单元格的空间 |
justify-content (水平方向) / align-content (垂直方向)
设置整个内容区域的水平方向和垂直方向的对齐方式。
| 属性值 | 描述 |
|---|---|
| start | 对齐容器的起始边框 |
| end | 对齐容器的结束边框 |
| center | 容器内部居中对齐 |
| space-around | 平分容器剩余空间 |
| space-between | 先两边贴边，再平分容器剩余空间 |
| space-evenly | 平分容器剩余空间，项目与项目之间、项目与容器边缘的距离相等 |
| stretch | 项目大小没有指定时，拉伸占据整个容器 |
grid-auto-columns / grid-auto-rows
用于设置多出来的项目的宽和高。
比如只设置了3×3规格的单元格，但实际有10个项目，这时，就有一个项目没在单元格中，即为多出来的项目。
常见 Grid 项目属性
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 / grid-row
grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式。
grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。
grid-column: 1 / 3; 等于 grid-column-start: 1; grid-column-end: 3;
grid-area
指定项目放在哪一个区域。
grid-area 属性还可用作 grid-row-start、grid-column-start、grid-row-end、grid-column-end 的合并简写形式，直接指定项目的位置。
语法格式：
grid-area: row-start / column-start / row-end / column-end;
justify-self / align-self / place-self
justify-self 属性设置单元格内容水平方向的对齐方式（左中右），跟 justify-items 属性的用法完全一致，只作用于单个项目。
align-self属性设置单元格内容垂直方向的对齐方式（上中下），跟 align-items 属性的用法完全一致，只作用于单个项目。
属性值：start | end | center | stretch
place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。
place-self: center center;
