H5开发开发利器——flex

距离新建这篇文章已经好几个月了，今天有终于有时间来完善这篇文章了...
flexbox即弹性布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了大部分浏览器的支持。
flexbox共经历了三个阶段的变化：
(1)W3C 2009年第1次草案：display:box
(2)W3C 2011年第2次草案：display:flexbox
(3)W3C 2012年第3次草案：display:flex(当前阶段版本)

首先来看张图了解下几个基本的概念：

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

任何一个元素都可以只能为flex布局，其可以水平布局也可以垂直布局(通过设置flex-direction：row／columnl来设置)，设置元素为flex 布局后我们还可以根据不同的需求在该元素上设置一下几种属性(容器属性)：
(1)flex-direction属性决定主轴的方向（即项目的排列方向）

  值范围：flex-direction: 
                        row             （默认值）：主轴为水平方向，起点在左端
                        row-reverse      主轴为水平方向，起点在右端
                        column           主轴为垂直方向，起点在上沿
                        column-reverse;  主轴为垂直方向，起点在下沿
  

(2)flex-wrap属性决定了如果一条轴线排不下，如何换行

  值范围：flex-wrap: 
                        nowrap            不换行
                        wrap              换行，从第二行的左侧开始
                        wrap-reverse      换行，从第二行的右侧开始

(3)justify-content属性决定了项目在主轴上的对齐方式

  值范围：justify-conten: 
                        flex-start            左对齐
                        flex-end              右对齐
                        center                居中对齐
                        space-between         两端对齐，项目之间的间隔都相等
                        space-around          每个项目两侧的间隔相等
                        
(4)align-items属性决定了项目在交叉轴上如何对齐方式
  值范围：align-items: 
                        flex-start     交叉轴的起点对齐。
                        flex-end       交叉轴的终点对齐。
                        center         交叉轴的中点对齐。
                        baseline       项目的第一行文字的基线对齐。
                        stretch        如果项目未设置高度或设为auto，将占满整个容
                                       器的高度。
                                       
(5)align-content属性决定了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
  值范围：align-content: 
                        flex-start     与交叉轴的起点对齐。
                        flex-end       与交叉轴的终点对齐。
                        center         与交叉轴的中点对齐。
                        space-between  与交叉轴两端对齐，轴线之间的间隔平均分布。
                        space-around   每根轴线两侧的间隔都相等。所以，轴线之间的
                                       间隔比轴线与边框的间隔大一倍。
                        stretch        轴线占满整个交叉轴。
                        
  **以上就是flex布局时容器上比较重要的属性，需理解透彻。**
  
  

说完容器的布局属性再来说说容器下各个项目的布局属性

  以下6个属性设置在项目上：
     1. order         定义项目的排列顺序。数值越小，排列越靠前，默认为0
     2. flex-grow     定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
     3. flex-shrink   定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
     4. flex-basis    定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏
                      览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即
                      项目的本来大小
     5. align-self    允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属
                      性。默认值为auto，表示继承父元素的align-items属性，如果没有
                      父元素，则等同于stretch
                      
     **以上就是flex布局时项目上比较重要的属性，需理解透彻。**
     
     

几点注意事项

1. flex布局其实就是将父类的元素实现了流式布局，我们只需要在父类定位好的情况下给子类“添砖
   加瓦”就可以了
2. justify-content：center + align-content：center 结合使用可以很方便的实现元素水
   平和垂直居中，相比之前用position来实现要高效很多

3. 由于经历了3个阶段的演变，所有在个别浏览器下会存在兼容性问题(如uc的低版本、QQ浏览器)，
   所以建议使用"autoprefixer"这类工具自动补全各类写法已避免该问题的出现