什么是flex布局？
一种用于按行或按列布局元素的一种一维布局方法。要开启flex布局，使用display：flex。
.div{
display:flex;
}
举个栗子：
<div class="box">
<div class="red">红色</div>
<div class="green">绿色</div>
<div class="bfa">浅绿色</div>
</div>
.box {
display: flex;
}
当我们为我们的box开启了弹性布局时，我们的布局发生了如下的改变。此时box就是我们的容器。
容器
使用了flex布局的元素，被称为“容器”。容器中的子元素组成元素的成员，被称为“项目”。
在flex的容器中，有两根轴，分别是“主轴”和“交叉轴”。
- 主轴(main axis)：容器中横向的轴被称为主轴。项目按照主轴依次进行排列。
- 交叉轴(cross axis)：容器中竖直排列的轴是交叉轴。
容器的常用属性
flex-wrap——换行相关属性。
包含：nowrap(默认),wrap,wrap-reverse. nowrap
- 默认不换行，当元素超出时会进行挤压。
wrap
- 设置wrap来进行换行，顺序是从左到右，从上到下。
wrap-reverse
- 反着换行，从下方开始。
flex-direction——项目排列的方向(横着排列还是竖着排列)，main axis的方向。
通常有4个属性：row(默认值)，row-reverse，column，column-reverse.
主轴在水平方向上：
row:从左到右
row-reverse:从右到左
主轴在竖直方向上：
column：从上到下
column-reverse：从下到上
flex-flow——以上两种属性(flex-wrap,flex-direction)的简写。
默认值为：row nowrap;
.box{
flex-flow:row nowrap;
}
justify-content——在主轴上的对齐方式
6个属性：flex-start(默认)，flex-end，center，space-between，space-around，space-evenly。
- flex-start:从主轴开始到结束
- flex-end:从主轴结束处开始排列
- center:靠主轴中间排列
- space-between:两边的元素靠两端对齐，中间的元素等间距的进行排列。
- space-around:每个项目之间的间距相等，项目到边框的距离是项目到项目的距离的一半。
- space-evenly:等间距排列，项目到边框和项目到项目的距离都是一样的。
align-items——在交叉轴上的对齐方式。
属性：flex-start(默认)，flex-end，center，baseline，stretch
- flex-start：从交叉轴起点开始对齐。
- flex-end:从交叉轴结束处开始对齐。
- center:在交叉轴中心处对齐。
- baseline：靠项目的第一行文字的基线对齐
- stretch:若项目未设置高度时，填充整个容器。
align-content——多根轴线的对齐方式。
以上属性全都设置在容器上。
项目的常用属性
order——项目排列的顺序,数字越小越靠前;
order:1;(数字)
flex-grow——项目放大的比例，如果存在剩余的空间就对其进行放大。
flex-grow:0 | 1 | 2 | 3;(数字)
默认为0，如果存在剩余的空间，也不放大。
flex-shrink——项目缩小的比例，默认为1，如果剩余空间不足，则对项目进行缩小。
flex-shrink:1|2|3;(数字)
默认为1，如果当前空间不足，则对项目进行缩小。
如果shrink为0，则不缩小。
flex-basis——该属性在剩余空间被分配前，定义了元素的默认尺寸。
flex-basis:auto | 3rem;(数字|auto)
flex——简写，flex-grow,flex-shrink,flex-basis的简写
flex:1,是flex-grow:1,flex-shrink:0,flex-basis:auto的缩写。
align-self：与align-items相似，但可以针对单个item。覆盖容器上的布局。
应用场景
垂直居中效果
display:flex;
align-items: center;
justify-content: center;
分块导航栏
display: flex;
justify-content: space-between;
为我们的最外层盒子开启弹性盒子布局，左边是我们的导航，右边是菜单项。通过space-between来控制间距。
绝对底部
为我们的content设置flew-grow:1;将剩余部分全部填充到中间部分。
