最近难得有空，总结一下flex布局相关知识点，如有错漏，请大神指点纠正，谢谢~
flex布局总结:
快速记忆
- 主轴方向记住justify
- 交叉轴方向记住align
- 关系就是：
- justify-content
- align-items
- align-self
- 设置主轴方向flex-direction
- 设置换行：flex-wrap
- 设置主轴和换行的复合属性：flex-flow
- 设置伸缩基准：felx-basis
- 设置拉伸：flex-grow
- 设置缩放：flex-strink
- 设置子元素顺序：order
兼容性写法：
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
display:box;
四种布局方式：
- 1.标准文档流
- 2.浮动布局
- 3.定位布局
- 4.flex布局
flex布局核心：
flex核心主要在轴和容器上做文章，下面主要以轴（主轴和交叉轴）和容器（父容器和子容器）来阐述。
容器:
- 父容器
父容器属性可以设置子容器统一排列方式
主轴方向：
1.justify-content：
父容器设置子容器在主轴的排列：
对应属性值排列方式：
*位置排列：
- flex-start
- flex-end
- center
*分布排列：
- space-around
- space-between
交叉轴方向：
2.align-items：
父容器设置子容器在交叉轴的排列：
对应属性值排列方式：
*位置排列：
- flex-start
- flex-end
- center
*基线排列：
- baseline
*拉伸排列：
- stretch
进阶属性：
3.flex-wrap：设置换行方式
换行：wrap
不换行：nowrap
逆序换行：wrap-reverse
逆序换行是指沿着交叉轴的反方向换行
4.flex-flow:轴向和换行，是flex-direction和flex-wrap的组合属性
flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，
比如 flex-flow:row wrap，flex-flow 是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：
row nowrap、column wrap 等，也可两者同时设置
5.align-content:多行沿交叉轴对齐：
当子容器多行排列时，设置行与行之间的对齐方式。
对应属性值排列方式：
*位置排列：
- flex-start
- flex-end
- center
*分布排列：
space-around
space-between
*拉伸排列：
- stretch
容器:#子容器
子容器属性可以设置自身排列方式
1.flex：
子容器设置自身容器的伸缩比例：
- 对应属性值单位方式：
- 无单位数字：1,2,3
- 有单位数字：15px,50px,100px
- none关键字：不伸缩
2.align-self：
子容器设置自身的交叉轴排列
对应属性值排列方式：
*位置排列：
- flex-start
- flex-end
- center
*基线排列：
- baseline
*拉伸排列：
- stretch
子容器进阶属性
3.flex-basis:设置基准大小
flex-basis 表示在不伸缩的情况下子容器的原始尺寸。
主轴为横向时代表宽度
主轴为纵向时代表高度：
4.flex-grow：设置扩展比例
- 子容器弹性伸展的比例,剩余空间按比例 扩展拉伸 分配
5.flex-shrink：设置收缩比例，剩余空间按比例 扩展收缩 分配
- 子容器弹性收缩的比例。
6.order:设置主轴排列顺序
- 改变子容器的排列顺序，覆盖HTML代码中的顺序，默认值为0，可以为负值，数值越小排列越靠前。
2.轴
主轴:
决定容器水平方向的排列
主轴的起始端由 flex-start 表示，末尾段由 flex-end 表示
1.flex-direction：
- 不同主轴方向位置不同
主轴位置方向对应属性值：
- 向右：row
- 向左：row-reverse
- 向下：coloumn
- 向上：coloumn-reverse
交叉轴
- 决定容器垂直方向的排列
- 交叉轴的起始端和末尾段也由 flex-start 和 flex-end 表示
- 主轴沿逆时针旋转90°得到交叉轴
flex布局共有13个属性
- 一个声明：display：flex
- 6个主容器
- 6个子容器
