传统的页面布局是基于 =====> "盒子模型";依赖 '定位'、'流动'、'显示'属性来解决；
(存在缺点) 对于伸缩性的布局处理起来就很麻烦。
flex box布局：简单完成各种伸缩性的布局；(解决了传统的弊端)
由“伸缩容器”和“伸缩项”组成的;
任何一个属性都可以组成flex box布局;
其中设为display:flex 或者display:inline-flex 的元素称为伸缩容器,伸缩容器的子元素称为伸缩项目；
伸缩项使用伸缩布局模型来排版。伸缩布局模型和传统布局不一样，它按照伸缩流的方向布局。
伸缩布局
默认情况下，伸缩容器由主轴（Main axis）和交叉轴(cross axis )组成；
主轴开始的位置叫做：main start ，结束的位置叫做main end ；
交叉轴开始的位置叫做cross start，结束的位置叫cross end;
伸缩项目在 主轴上的占据的空间叫做main size ,交叉轴上的位置叫做cross size；
根据设置的情况不同，主轴既可以是水平也可以是垂直的，伸缩项目都是沿着主轴，从主轴开始到主轴结束位置进行排列；
Note:p.【由于flexbox 还是处于草稿阶段，所以使用flex box 布局的时候，需要加上各个浏览器的私有前缀，即-webkit ,-moz ,-ms ,-o 等等；
伸缩性支持的属性：
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1、
display 指定该容器是否为伸缩容器；
display:flex | inline-flex
flex: 产生块级的伸缩容器
inline-flex: 这个值用于产生行内级伸缩容器
.flex-container {
display:inline-flex;
}
说明：这个时候，css的columns在容器上没有效果，float，clear，vertical-align在伸缩项目上没有效果;
2、
flex-direction 指定主轴的方向，语法：
flex-direction:row | row-reverse | columns | column-reverse
row （默认值）：伸缩容器若是为水平方向为主轴，伸缩项目的排版方向是从左向右排列；
row-reverse 中若主轴是行向的，那么排列就是从右边想左边；
columns :伸缩容器是垂直方形的时候，排版是从上往下的；
column-reverse ： 从下往上；
3、
flex-wrap 该属性主要用来指定伸缩容器的主轴线方向上控件不足的情况下的时候，需要判断是否需要换行，要判断是是否换行以及如何换行；
flex-wrap:nowrap | wrap | wrap-reverse
nowrap : 及时空间不足，也不会换行 ；
wrap : 是容器在控件不足的时候会换行；换行是从上往下；
wrap-reverse :这个换行和上面的wrap是相反的；
4、同时定义了伸缩容器的主轴和侧轴；
flex-flow该属性是flex-direction 和flex-wrap 属性缩写的版本；
默认值是： row nowrap
eg：flex-flow:row wrap-reverse;
5、
justify-content :该属性是用来定义伸缩项目沿着主轴线的对齐方式；
justify-content :flex-start ,flex-end ,center ,space-between ;
flex-start : (默认值) 伸缩项目是向主轴线的起始位置对齐；
flex-end 靠近结束位置进行对齐；
center ： 是中间对齐的方式；
space-between：伸缩项目是会平均地分布在主轴线上，第一个伸缩项目是在主轴线的开始位置，最后一个伸缩项目是在主轴线的终点位置上；
space-around: 伸缩项目会平均的分布在主轴线上，两端保留有一半空间；
6、（注意这个和下面的那个属性的区别）
align-items 该属性是用来定义伸缩项目在伸缩容器的“交叉轴上的对齐方式”；
align-items :flex-start , flex-end ,center ,baseline ,stretch ;
flex-start : 伸缩项目向交叉轴的起始位置对齐齐；
flex-end : 伸缩项目向交叉轴的结束位置靠齐；
center : 伸缩项目向交叉轴的中间位置靠齐；
baseline: 伸缩项目根据它们的基线对齐；
（即为第二个item会向第一个item的基线对齐，会有梯度下降的形式；）
stretch： 伸缩项目在交叉轴上拉伸填充整个容器；
7、
align-content : 主要用来调整伸缩项目出现换行后在交叉轴上对齐的方式，类似于主轴上使用的justify-content；
align-content :flex-start , flex-end ,center ,space-between,space-around ,stretch ;
flex-start : 伸缩项目向交叉轴的起始位置考齐；
flex-end : 伸缩项目向交叉轴的结束位置靠齐；
center : 伸缩项目向交叉轴的中间位置靠齐；
space-between: 伸缩项目在交叉轴中平均分布；
space-around:伸缩项目在交叉轴中平均分布，且两边各有一半空间；
stretch： 伸缩项目在交叉轴上伸展以占用剩余的空间；
Note：
flex-wrap : wrap 一定会开启，且它在换行的情况下才会看到效果；7 中所提到的伸缩项目均指伸缩项目所在的行，因为这里调整的是伸缩项目换行之后每一行之间的对齐方式；
总结：上面的都是flex-box 上容器的属性；
网友评论