Flex布局和Box布局的区别以及兼容性

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.csdn.net/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;
}