flex兼容性写法

display:box;
display:-webkit-box;
display:-webkit-flex; 
display:-moz-box; 
display:-ms-flexbox; 
display:flex;

 

 -prefix-box-flex: 1; 
 -webkit-box-flex: 1; 
 -webkit-flex: 1; 
 -moz-box-flex: 1; 
 -ms-flex: 1; 
 flex: 1; 

一、flexbox布局（弹性布局）

1.指定flex布局 { display:flex;
display: -webkit-flex; /* Safari */}
行内元素 { display:inline-flex}

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2.概念
水平主轴(main axis)，垂直主轴(cross axis)。

3.容器属性
。flex-direction： 项目的排列方向（橫or竖）
。flex-wrap： 换不换行，默认一条线上
。flex-flow： 方向，换行
。justify-content： 主轴上对齐方式
。align-items： 交叉轴如何对齐
。align-content： 很多根轴线的对齐方式

。box-orient：指定一个box子元素方向

3.1 flex-direction
—》row 水平，左端
—》row-reverse 水平，右端
—》column 垂直，上沿
—》column-reverse 垂直，下沿

3.2 flex-wrap
—》nowrap 不换行
—》wrap 换行
—》wrap-reverse 换行，第一行在下方

3.3 flex-flow
是flex-direction和 flex-wrap简写，默认row nowrap

3.4 justify-content

   —》justify-content: flex-start | flex-end | center | space-between | space-around;
                                     左对齐 | 右对齐 | 居中 | 两端对齐贴紧，项目间间隔相等 | 每个项目两两间隔相等

3.5 align-items
定义项目在交叉轴上如何对齐

   —》align-items: flex-start | flex-end | center | baseline | stretch;


   交叉轴起点对齐 | 交叉轴终点对齐 | 交叉轴中点对齐 | 项目第一行文字基线对齐
   默认值：未设或auto，将占满整个容器高度。

3.6 align-content
定义很多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。

    —》align-content: flex-start | flex-end | center | space-between | space-around | stretch;

   与交叉轴起点对齐 | 与交叉轴终点对齐 | 与交叉轴两端对齐，轴线之间的间隔平均分布
   | 每根轴线两侧的间隔都相等


   默认值：轴线占满整个交叉轴。



3.7 box-orient
      指定一个box子元素是否应按水平或垂直排列。
      horizontal：水平（默认）
      vertical：垂直
      inline-axis：子元素沿内联坐标轴（映射到横向）
      block-axis：子元素沿块坐标轴（映射到垂直）

4.项目属性

。order：项目的排列顺序
。flex   
。flex-grow  放大比例
。flex-shrink 缩小比例
。flex-basis  主轴空间大小
。align-self  允许单个项目有与其他项目不一样的对齐方式

4.1 order 定义项目的排列顺序
    -》order: ;
    数值越小，排列越靠前，默认为0;


4.2 flex-grow 


    -》 flex-grow: ; /* default 0 */

    项目的放大比例，默认是0，即若存在剩余空间，也不放大。
    flex-grow属性都为1，将等分剩余空间；
    flex-grow属性为2，其他都为1，则前者占据的剩余空间比其他项多一倍。


   
4.3 flex-shrink


    -》flex-shrink: ; /* default 1 */


    项目的缩小比例，默认是1，即空间布局，该项目将缩小。
    flex-shrink属性都为1，将等比例缩小；
    若一个项目flex-shrink属性为0，其他都为1，则空间不足时，设为0的不缩小。

    负值对该属性无效。


 4.4 flex-basis


     -》flex-basis:  | auto; /* default auto */


     在分配多余空间之前，项目占据的主轴空间大小。默认为auto，即项目的本来大小。
     被省略为0%，零尺寸。


 4.5 flex


     -》flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]


     flex属性是 flex-grow，flex-shrink，flex-basis缩写，默认为0 1 auto。
     后两个属性可选。
 
     该属性有两个快捷值：auto( 1 1 auto)和none( 0 0 auto)。
     建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
     
  详细：其中被省略默认为0%
            指定auto，取决于自身，若宽没定义，则长度取决于内容。
  
   flex:1 == flex: 1 1 0%;  
   flex:none == flex:0 0 auto;
   flex:auto == flex:1 1 auto;
  


   例如：

                
Hello
                
Hello
       
         


         div{ width:300px; display:flex; }
         div #p1{ flex:1; }
           

   【flex:1 意思是设置后DIV有灵活的长度，即其余auto宽度后,  剩余的的都是flex:1它的】


  4.6 align-self


      -》align-self: auto | flex-start | flex-end | center | baseline | stretch;
      允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。  

二、兼容性方面

/父元素-横向排列（主轴）/

display:box;  （伸缩盒最老版本）
display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
display:-webkit-flex; /* Chrome */
display:-moz-box;     /* Firefox 19 */
display:-ms-flexbox;   
display:flex;  /*flex容器*/

/*方向*/
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row; 
flex-direction:row;    【新版本语法】

/*父元素-水平居中（主轴是横向才生效）*/【新版本语法】
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;

/*子元素-垂直居中（在侧轴、纵轴上）*/【新版本语法】
 -webkit-align-items:center;
 -moz-align-items:center;
 -ms-align-items:center;
 -o-align-items:center;
 align-items:center;

/*父元素-横向换行 */
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap:wrap;

/* 子元素—平分比例 */ 
 -prefix-box-flex: 1; /* old spec webkit, moz */
 -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
 -webkit-flex: 1;          /* Chrome */
 -moz-box-flex: 1;         /* Firefox 19- */
 -ms-flex: 1;              /* IE 10 */
 width:20%;
 flex: 1;                  /* NEW,  Opera 12.1, Firefox 20+ */
 flex: 2;

不写flex数值默认不可以伸缩。

/* 子元素-用于改变源文档顺序显示 */
 -prefix-box-ordinal-group: 1; /* old spec; must be positive */
 -webkit-box-ordinal-group: 2;    
 -moz-box-ordinal-group: 2;       
 -ms-flex-order: 2;               
 -webkit-order: 2;                
 order: 2;                        
 order: 3;

【老版本语法】

/*居中 */
box-pack:center;  //水平
box-align:center; //垂直
-webkit-box-pack:center;
-webkit-box-align:center;
-moz-box-pack:center;
-moz-box-align:center;
-ms-flex-pack:center;
-ms-flex-align:center;

/*子元素方向 */  
-webkit-box-orient:horizontal;  
-moz-box-orient:horizontal;  
-ms-box-orient:horizontal; 
-o-box-orient:horizontal; 
box-orient:horizontal;