css中display:-moz-box;是啥意思

Posted 2023-05-05

display:box;box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。
-moz-是火狐浏览器的前缀 参考技术A 个人觉得这种写法应该是老掉牙了，-moz-是火狐浏览器的前缀，应该是几年前的火狐不支持display：box属性，所以才会加前缀，但是现在都支持了，可以去掉这个前缀，直接写：
display:box; 参考技术B 盒模式，控制父容器里面子元素的排列方式、排列顺序、垂直（水平）对齐方式 参考技术C MOZ-BOX是定义火狐浏览器的

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;

}