定义
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局
声明弹性盒子的几种方式
就像前面说的，所有容器都可以指定为flex布局
.box{
display:flex;
}
行内元素也可以使用：
display:inline-flex;
改变弹性元素的方向
弹性盒子默认是从左到右的方向，此时的轴是水平方向的，flex-direction默认属性为row
.box{
display:flex;
}
flex-direction属性来改变排列方向，也就是把轴变为垂直方向
.box{
display:flex;
flex-deriction:column;
}
column-reverse,row-reverse同理
控制弹性盒子溢出问题
如果盒子里面的元素特别多，水平宽度或者高度不够时，默认的情况是会缩小盒内元素宽度
在盒子加上flex-wrap，可以实现溢出部分往下换行
我们也可以通过flex-flow同时设置轴的方向和是否换行
主轴与交叉轴
话不多说，直接看图：
当属性为flex-direction:column时，主轴为垂直方向，交叉轴与主轴垂直
主轴的排列方式
控制主轴的属性为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-centent
一、整体靠一边
与主轴类似，flex-start为交叉轴开始，flex-end为交叉轴尾部
二、整体居中：align-content:center
三、交叉轴首尾靠边，其他元素间隔平均分布：align-content:space-between
四、交叉轴元素上下间距相同：align-content:space-around
五、交叉轴元素间距平均：：align-content:space-evenly
控制弹性盒子内的单独元素
一、align-self
通过align-self属性，可以控制单独元素，类似于对主轴整体的控制
二、元素可用空间分配：flex-grow
flex-grow属性指子元素分配到父级盒子的占比
如都是1的时候：
元素动态缩小
元素动态缩小使用flex-shrink属性控制。当你内部元素总宽度大于外部元素宽度，又不适用wrap让其换行，则可以使用flex-shrink控制内部元素缩放。
0表示不缩放，数值越大，缩小成都越大
主轴的基准尺寸flex-basis
设置盒子内部元素的基准尺寸flex-basis，优先级大于css设置他的宽高
弹性元素属性组合写法
flex-grow:1;
flex-shrink:2;
flex-basis:100px;
等同于
flex:1 2 100px;
控制弹性元素的排序：order
属性order越大，元素越靠后
总结
- 改变主轴方向：flex-direction
- 解决换行：flex-warp
- 同时设置主轴方向和换行：flex-flow
- 控制主轴排列方式：justify-content
- 控制交叉轴排列方式：align-centent
- 控制盒内单独元素：align-self
- 盒内元素分配比例/缩放/基准宽高：flex-grow/flex-shrink/flex-basis，也可以写为flex:1 2 100px.(按顺序)
