flex兼容性写法

Posted beimingbingpo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flex兼容性写法相关的知识,希望对你有一定的参考价值。

https://blog.csdn.net/cddcj/article/details/52131089

一、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属性。  
  

 

二、兼容性方面

 

  /*父元素-横向排列(主轴)*/
     
  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;

 






























































































































































































































































以上是关于flex兼容性写法的主要内容,如果未能解决你的问题,请参考以下文章

flex弹性盒子的兼容性写法

史上最全flex兼容写法整理

flex和box兼容性写法

前端开发,flex兼容写法

box-flex兼容写法

flex布局兼容写法