Flex总结
最新开发一个小程序，复习了一下flex, 好记性真的不如一个烂笔头啊，长时间不用都遗忘了
1， 任何容器都可以设置成 flex 容器
.box {
display: flex;
}
行内容器也可以设置成flex布局
.box {
display: inline-flex;
}
2, 容器的六个属性
(1) - flex-direction: 决定主轴的方向，即项目的排列方向
flex-direction: row 默认值，水平排列，起点左端
flex-direction: row-reverse 水平排列，起点右端
flex-direction: column 垂直方向， 起点在上边
flex-direction: column-reverse 起点在下边(2) flex-wrap 属性 默认情况项目都排在一条线上。
flex-wrap : nowrap 默认 不换行
flex-wrap : wrap 换行，第一行在上面
flex-wrap : wrap-reverse 换行， 在第一行的下面(3) flex-flow 属性是 flex-direction 和 fle-wrap的简写形式
flex-flow: row nowrap(4) justify-content 属性定义了项目在主轴的堆砌方向
justify-content : flex-start 左对齐
justify-content : flex-end 右对齐
justify-content : center 居中
justify-content : space-between 左端对齐，项目平分
justify-content : space-around 项目左右两边间距相等(5)align-items 属性 定义了项目在交叉轴上的对齐方式
align-items : flex-start 交叉轴的起点
align-items : flex-end 交叉轴的终点
align-items : center 交叉轴中心
align-items : baseline项目第一行文字的基线对齐
align-items : stretch 默认值， 如果没有设置容器的高度获取设置为auto，将占满整个容器(6) align-content 属性
六个属性
flex-shrink : 1 默认为1 ，当容器不够分配时，元素都将等比例缩小，占满整个容器
flex-grow: 0 默认为0 ，当容器有多余的空间，剩下的不进行分配
flex-basic: 设置元素在主轴上的初始化尺寸，其实就是width,宽度
flex-basis: 0 根据内容撑开宽度
flex-basis: 50px 非0时，就是width, 不过优先级比width更高一些
flex-basis: auto 如果设置了width则元素尺寸由width决定，没有设置则由内容决定(7) 常用的复合属性
flex: flex-grow flex-shrink flex-basis
flex: 2 1 100px;
flex : auto = flex: 1 1 auto
flex : none = flex: 0 0 auto 固定尺寸，不伸缩