flex浏览器兼容性写法与横轴的模板代码实例

时间:2021-11-25
类别:教程 - 网页设计

flex很早就出来了,但是由于兼容性很差,一直不火。

目前个人只在手机端中小心翼翼的使用flex,整理个模板出来,横轴的!

模板css:

  1. .children{ 
  2.  
  3.     height20px
  4.  
  5.     border1px solid red
  6.  
  7.     margin2px
  8.  
  9.  
  10. .parent{ 
  11.  
  12.     width1000px
  13.  
  14.     border:1px solid green
  15.  

模板html:

  1. <div class="parent"
  2.  
  3.     <div class="child"></div> 
  4.  
  5.     <div class="child"></div> 
  6.  
  7.     <div class="child"></div> 
  8.  
  9.     <div class="child"></div>    
  10.  
  11. </div> 

横轴的模板flex兼容性写法:

  1. /* 父元素-横向排列(主轴) */ 
  2.  
  3. .parent{ 
  4.  
  5.     display: box; 
  6.  
  7.     display: -webkit-box;      
  8.  
  9.     display: -moz-box;         
  10.  
  11.     display: -ms-flexbox;      
  12.  
  13.     display: -webkit-flex;     
  14.  
  15.     display: flex;             
  16.  
  17.     -webkit-flex-direction: row; 
  18.  
  19.     -moz-flex-direction: row; 
  20.  
  21.     -ms-flex-direction: row; 
  22.  
  23.     -o-flex-direction: row; 
  24.  
  25.     flex-direction: row; 
  26.  
  27.  
  28. /* 子元素-平均分栏 */ 
  29.  
  30. .child{ 
  31.  
  32.     -webkit-box-flex: 1
  33.  
  34.     -moz-box-flex: 1;                     
  35.  
  36.     -webkit-flex: 1;          
  37.  
  38.     -ms-flex: 1;              
  39.  
  40.     flex: 1;  
  41.  
  42.  
  43. /* 父元素-横向换行 */ 
  44.  
  45. .parent{ 
  46.  
  47.     -webkit-flex-wrap: wrap; 
  48.  
  49.     -moz-flex-wrap: wrap; 
  50.  
  51.     -ms-flex-wrap: wrap; 
  52.  
  53.     -o-flex-wrap: wrap; 
  54.  
  55.     flex-wrap: wrap; 
  56.  
  57.  
  58.   
  59.  
  60. /* 父元素-水平居中(主轴是横向才生效) */ 
  61.  
  62. .parent{ 
  63.  
  64.     -webkit-justify-contentcenter
  65.  
  66.     -moz-justify-contentcenter
  67.  
  68.     -ms-justify-contentcenter
  69.  
  70.     -o-justify-contentcenter
  71.  
  72.     justify-contentcenter
  73.  
  74.     /*其它取值如下: 
  75.  
  76.     align-items     主轴原点方向对齐 
  77.  
  78.     flex-end        主轴延伸方向对齐 
  79.  
  80.     space-between   等间距排列,首尾不留白 
  81.  
  82.     space-around    等间距排列,首尾留白 
  83.  
  84.     */ 
  85.  
    收藏