FlexBox布局（弹性盒子模型）
FlexBox可以控制子级盒子的摆放的方向、顺序、宽度和高度、水平和垂直方向的对齐以及是否允许折叠等属性，用途十分广泛。父元素只需要将CSS设置为display:flex即可生效，其控制子元素的常用属性为：
弹性盒子常用属性(父元素)
flex-direction 对齐方向
- row 从左到右
- row-reverse 从右到左
- column 从上到下
- column-reverse 从下到上 同时，对flex-direction进行设置，会改变主轴及其方向，如将其设置为column-reverse，则主轴方向为从下到上。侧轴是与之垂直的方向的轴。
justify-content
- flex-start 按照主轴的方向对齐，由于
flex-direction的默认方向是从左到右，所以默认是左对齐。因为主轴的方向不一定是从左到右，所以是flex-start，而不是left或right等。 - flex-end 按照主轴的反方向对齐
- center 主轴方向居中
- sapce-between 两边没有空白，内容间有均等的空白
- space-around 两边有较少的空白，中间空白较大
- sapce-evently 所有的空白都一样
align-items 副轴对齐
- flex-start 按照侧轴的方向对齐，由于
flex-direction的默认主轴方向是从左到右，侧轴与之垂直，所以默认是上对齐。 - flex-end 下对齐
- center 居中对齐
- stretch 元素被拉伸以适应容器
- baseline 元素位于容器的基线上，多适用于多个子元素的文本在一条水平线上
flex-wrap
规定flex容器是单行或者多行，同时主轴的方向决定了新行堆叠的方向
- nowrap 默认值，子元素超出父容器时也不换行
- wrap 子元素超出父容器时换行
- wrap-reverse 子元素超出父容器时换行,且换行部分与不换行的排列顺序相反
flex-flow
它是flex-direction与flex-wrap的缩写，默认值是 row nowrap
弹性盒子常用属性(子元素)
align-self
属性值和align-items的一样，只不过单独控制这个元素在父元素的位置
order
用整数值来定义排列顺序，按照order的值从小到大摆放，可以为负值，默认为0
flex-shrink：
一个数字，控制元素是否可以压缩，即子元素将相对于其他灵活的元素进行收缩的量，默认值是 1。当其值为0，表示不允许压缩，刚性的。
flex-grow
减去不伸展的宽度，将剩余空间对设置了flex-grow 的元素按照其数值的比例进行空间分配
flex-basis
其数值为一个长度，单位为长度单位或百分比，规定元素的初始长度。默认值为元素的长度，若子元素为指定长度，则根据子元素的内容决定。
Grid网格布局
Grid网格布局会将整个父容器看作是一个网格，然后使用相关的属性对资源子元素进行配置。
父元素常用属性
grid-template-columns
grid-template-columns会按照指定的比例分配列空间，如
{
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}
会将列分为五列，每列占比20%。但是这样写起来比较麻烦，我们可以使用repeat函数进行简写，它接收两个参数，重复次数，和需要重复的占比。
{
display: grid;
grid-template-columns: repeat(5, 20%);
}
上面的两段代码效果完全一致。
{
display: grid;
grid-template-columns: 50% 20%;
}
会将列分为2列，每列占比分别为50% 和 20%，剩下的30%不占用
grid-template-columns不仅仅只接受百分比的值，也接受像px或em这样的长度单位,甚至可以将不同的长度单位混合使用。
网格系统也引入了一个新的单位，分数fr。每一个fr单元分配一个可用的空间。比如说，如果两个元素分别被设置为1fr和3fr，那么空间就会被平均分配为4份；第一个元素占据1/4，第二个元素占据3/4。
列的宽度采用像素，百分比或者em的单位的时候，其他使用fr单位设置的列将会平分剩下的空间。
{
display: grid;
grid-template-columns: 50px 1fr 1fr 1fr 50px;
}
上面代码表示左右两列占的宽度为50px，中间有三列，其宽度相等，均为1:1:1
grid-template-rows
用法和grid-template-column完全一样
grid-tempalte
grid-template是grid-template-rows和grid-template-columns的缩写形式。数值间用/隔开。
子元素常用属性
grid-column-start:
其数值为整数，假设为x。正数时，表示从左开始数第x列开始，负数时表示从右开始数第x-1列开始。需要说明的是，若想指向右侧第一列，需要将x设置为-2而不是-1。
grid-column-end:
其数值为整数，假设为x。正数时，表示从左开始数第x+1列结束，负数时表示从右开始数第x列开始。
end的值可以比start大，相当于两个属性的值进行交换。 也可以使用
span关键词来指定你所要跨越的宽度。请注意span只能是正值。
{
grid-column-start: 2;
grid-column-end: span 2;
}
上述代码指定的区域是第一行的第2和3列。
也可以将span关键字和grid-column-start一起使用，表示相对于结束位置来设置其宽度。
{
grid-column-start: span 2;
grid-column-end: 3;
}
这两部分代码的效果完全一样。
grid-column
grid-column是一个缩写形式，分别表示grid-column-start和grid-column-end两个属性。它可以一次接受两个值，只要用'/'分开就好。span关键字在这个简写中也是可以使用的。
grid-row-start
用法和grid-column-start一致，只不过是从上到下。其中grid-row-end、grid-row与grid-column-end和grid-column用法完全一致。
grid-area
属性接受4个由'/'分开的值：grid-row-start, grid-column-start, grid-row-end, 最后是grid-column-end。一定要注意顺序！
如果有多个grid-area，会产生网格的覆盖，后者覆盖前者。
order
如果某个元素的位置比较特殊，需要单独设定，则需要order属性进行控制。默认情况下，所有的网格项的order都是0，但是顺序也可以被任意设置为正数或者负数，就像z-index一样
