flex弹性盒子的兼容性写法

Posted 2020-11-04 瑞瑞大人

tags:

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

将这些添到css文件中基本上能满足页面弹性盒子的需求

　/*定义弹性布局盒子*/

　display：{

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

　}

　/*定义子元素排列*/

flex-direction：{

　　-webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -moz-box-orient:vertical;
    -moz-box-direction:normal;
    flex-direction:column;
    -webkit-flex-direction:column;

}

/*横向排列布局*/

justify-content：{

　　-webkit-justify-content:center;
　　justify-content:center;
　　-moz-box-pack:center;
　　-webkit--moz-box-pack:center;
　　box-pack:center;

}
/*竖向排列布局*/

align-items:{

　　align-items:center;
　　-webkit-align-items:center;
　　box-align:center;
　　-moz-box-align:center;
　　-webkit-box-align:center;

}
/*伸缩盒子布局兼容*/

flex:{

　　box-flex:num;
　　-webkit-box-flex:num;
　　-moz-box-flex:num;
　　flex:num;
　　-webkit-flex:num;

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