flex兼容性寫法

http://www.javashuo.com/article/p-nqickpvg-cd.html

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; 

 

 

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: <integer>;
        數值越小，排列越靠前，默認爲0;


    4.2 flex-grow 


        -》 flex-grow: <number>; /* default 0 */

        項目的放大比例，默認是0，即若存在剩餘空間，也不放大。
        flex-grow屬性都爲1，將等分剩餘空間；
        flex-grow屬性爲2，其餘都爲1，則前者佔據的剩餘空間比其餘項多一倍。
  

       
    4.3 flex-shrink


        -》flex-shrink: <number>; /* default 1 */


        項目的縮小比例，默認是1，即空間佈局，該項目將縮小。
        flex-shrink屬性都爲1，將等比例縮小；
        若一個項目flex-shrink屬性爲0，其餘都爲1，則空間不足時，設爲0的不縮小。
 
        負值對該屬性無效。


     4.4 flex-basis


         -》flex-basis: <length> | 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)。
         建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。
         
      詳細：其中<flex-basis>被省略默認爲0%
                <flex-basis>指定auto，取決於自身<width>，若寬沒定義，則長度取決於內容。
      
       flex:1 == flex: 1 1 0%;  
       flex:none == flex:0 0 auto;
       flex:auto == flex:1 1 auto;
      


       例如：<div>
                    <p id="p1">Hello</p>
                    <p>Hello</p>
           
             </div>


             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屬性。  
  

 

2、兼容性方面

 

  /*父元素-橫向排列（主軸）*/
     
  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;