1. 程式人生 > >Flex佈局和Box佈局的區別以及相容性

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;
}