Flex布局兼容性

• 父容器

• • display：flex

• • 首先要声明使用的是flex布局

/*display：flex的兼容写法*/
    display: -webkit-box;     /*安卓低版本*/
    display: -moz-box;        /*火狐低版本*/
    display: -ms-flexbox;     /*IE版本*/
    display: -webkit-flex;    /*谷歌*/
    display: flex;            /*谷歌，火狐等新版本*/复制代码

• justify-content属性：表示水平轴的排列方式

• • flex-start——左对齐排列

• • flex-end——右对齐排列

• • center——居中排列

• • space-around——左右留出边距

• • space-between——左右不留边距

/*justify-content的兼容写法*/
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;复制代码

• align-items属性：表示垂直轴的排列方式

• • flex-start——左对齐排列

• • flex-end——右对齐排列

• • center——居中排列

• • space-around——上下留出边距

• • space-between——上下不留边距

/*align-items：center的兼容写法*/
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;  复制代码

• flex-direction属性：表示旋转轴，垂直排还是水平排

• • row——水平排，默认就是从左往右排,不需要声明。

• • column——垂直排，从左往右变成从上往下排

    flex-direction:column
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;复制代码

• flex-wrap属性：等分排列，超过父容器宽度转移到下一行

• • nowrap——不按一行排列

• • wrap——一行排列

  /*flex-wrap:wrap兼容性写法*/
    -webkit-box-lines:multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;复制代码

• 子容器

• • flex-basics属性：可以按百分比设置每个子容器的宽高度，此属性不兼容

• • width属性：若垂直排要设置每个子容器的这个属性

• • height属性：若水平排要设置

• • flex：1——用于低版本兼容里表示平均分栏，可设置宽高

    -webkit-box-flex: 1 ;      
    -ms-flex: 1 ;            
    -moz-box-flex: 1;       
    -webkit-flex: 1;        
    flex: 1;
    width：20%;
    height：30%;                 复制代码

转载于:https://juejin.im/post/5cc56f3b6fb9a032045953f0