flex布局和box布局的默认值区别
1、box布局与flex布局仅有的几个属性表现一致的:
1、box-orient: horizontal | vertical
== flex-direction: row | column // 决定主轴方向,默认值都是横向
2、box-pack: start | end | center | justify
== justify-content: flex-start | flex-end | center | space-around //默认值是start
3、box-align: start | end | center | baseline | stretch //默认值为start
== align-items: flex-start | flex-end | center | baseline | stretch //默认值为stretch
// baseline有兼容性问题,最好别用。
2、flex布局的flex-shink
默认值是0
,即如果父元素宽度不够,每个元素都会压缩自己的宽度。box布局默认就是元素自己的宽度。
与华为Mate9浏览器的兼容
1、!!!完全不支持flex布局!!!
2、在-webkit-
的情况下,支持box布局
box布局属性说明参考:https://blog.youkuaiyun.com/AliceWu_1111/article/details/81327285
3、不支持box布局的flex-box
——控制子元素大小的属性。
4、支持box-orient
, box-pack
, box-align
的全部属性。
针对自己的项目,box布局的兼容性方案:
.box(){
display:-webkit-box;
display:-moz-box;
display: -ms-flexbox;
display:flex;
}
// 决定主轴方向
.box-orient(@arg){
-webkit-box-orient: @arg;
-moz-box-orient: @arg;
box-orient: @arg;
}
.box-orient-vertical(){
.box-orient(vertical);
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
.box-orient-horizontal(){
.box-orient(horizontal);
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
// 在主轴上的元素排列
.box-pack(@arg){
-webkit-box-pack: @arg;
-moz-box-pack: @arg;
-ms-flex-pack: @arg;
}
.box-pack-start(){
.box-pack(start);
-webkit-justify-content:flex-start;
-ms-justify-content:flex-start;
justify-content:flex-start;
}
.box-pack-end(){
.box-pack(end);
-webkit-justify-content:flex-end;
-ms-justify-content:flex-end;
justify-content:flex-end;
}
.box-pack-center(){
.box-pack(center);
-webkit-justify-content:center;
-ms-justify-content:center;
justify-content:center;
}
.box-pack-justify(){
.box-pack(justify);
-webkit-justify-content:space-between;
-ms-justify-content:space-between;
justify-content:space-between;
}
// 副轴上的元素排列
.box-align(@arg){
-webkit-box-align: @arg;
-moz-box-align: @arg;
-ms-flex-align: @arg;
}
.box-align-start(){
.box-align(start);
-webkit-align-items: flex-start;
-ms-align-items: flex-start;
align-items: flex-start;
}
.box-align-end(){
.box-align(end);
-webkit-align-items: flex-end;
-ms-align-items: flex-end;
align-items: flex-end;
}
.box-align-center(){
.box-align(center);
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
}
.box-align-stretch(){
.box-align(stretch);
-webkit-align-items: stretch;
-ms-align-items: stretch;
align-items: stretch;
}