Flex佈局和Box佈局的區別以及相容性
阿新 • • 發佈:2018-12-27
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; }