这是我参与「第四届青训营 」笔记创作活动的的第1天
为什么要引入Flex布局
传统的布局在盒子模型的基础上通过position、float等属性实现，可以实现简单的排版，但是对于常用的垂直水平居中布局实现并不灵活，且较为复杂。因此CSS提供了更高级的Flex box弹性布局，通过其中的属性可以实现子级元素在容器中的排序、流向、对齐、宽高等功能，使布局更加灵活高级。
Flex布局的基本组成
Flex布局基于容器与容器中的子元素两部分构成，其中子元素的行为受容器中Flex相关属性的控制。基于对布局排序对齐等功能的实现，容器默认存在两根轴，主轴与侧轴。
Felx布局的容器属性
flex-direction
flex-direction属性决定子元素的排序方向。
flex-direction: row;默认值，子元素从左向右排序。
flex-direction: row-reverse;子元素从右向左排序。
flex-direction: column;子元素从上到下排序。
flex-direction: column-reverse;子元素从下到上排序。
justify-content
justify-content设置子元素在主轴上的对齐方式。
justify-content: flex-start;默认值，子元素从起点开始排列。
justify-content: flex-end;子元素从终点开始排列。
justify-content: center;子元素居中排列。
justify-content: space-between;首元素位于起点，尾元素位于终点，其余子元素均匀排列。
justify-content: space-around;均匀排列每个元素，子元素周围分配相同的空间。
justify-content: space-evenly;均匀排列每个元素，子元素之间间隔相等。
align-items
align-items设置子元素在侧轴上的对齐方式。
align-items: stretch;默认值。
若侧轴大小属性未设定，元素高度拉伸为容器高度。
align-items: flex-start;子元素紧靠侧轴起始边界。
align-items: flex-end;子元素紧靠侧轴结束边界。
align-items: center;子元素位于容器中心。
align-items: baseline;子元素位于容器基线。
flex-grow
flex-grow有剩余空间时的伸展能力，设置扩展比率，默认值为flex-grow: 0;
容器总宽度为400px，每个子元素的宽度为100px，还剩
400-3*100=100px。对于剩下的100px，通过子元素中的伸展比率进行扩展，a元素的扩展比率为2，b元素的扩展比率为默认值0，c元素的扩展比率为1。a元素扩展2/3*100=66.6px,b元素扩展0*100=0,c元素扩展1/3*100=33.3px。
flex-shrink
flex-shrink容器空间不足时收缩的能力，设置收缩比率，默认值为flex-shrink: 1;。
容器总宽度为400px，每个子元素的宽度为150px，不足
3*150-400=50px。对于不足的50px，通过子元素中的收缩比率进行收缩，a元素的收缩比率为默认值1，b元素的扩展比率为0，c元素的扩展比率为默认值1。a元素收缩1/2*50=25px,b元素收缩0*100=0,c元素收缩1/2*50=25px。
