在web布局中,我們經常使用的是display:inline-block,display:flex,這些,但其實在進行移動端設備自適應布局中,-webkit-box布局更加合適
不同的瀏覽器有不同的前綴,這里使用-webkit示例
Mozilla-----------------display:-moz-box
Webkit------------------display:-webkit-box
As specified-----------display:box
首先,需要了解的是具備的屬性
| -webkit-box-flex | 在子元素上設置,屬於子元素之間的比例,值為數值即可 | 默認值:1(數值,按比例分配) |
| -webkit-box-orient | 在父元素設置,子元素的排列方式 | vertical(垂直)/horizontal(水平)/inline-axis(默認值,橫向排列,映射為 horizontal)/block-axis(沿着塊軸來排列子元素,映射為 vertical)/inherit(從父元素繼承 box-orient 屬性的值) |
| -webkit-box-align | 在父元素設置,子元素垂直方向的對齊方式 | start(對於正常方向的框，每個子元素的上邊緣沿着框的頂邊放置。對於反方向的框，每個子元素的下邊緣沿着框的底邊放置。)/end(對於正常方向的框，每個子元素的下邊緣沿着框的底邊放置。對於反方向的框，每個子元素的上邊緣沿着框的頂邊放置。)/center(均等地分割多余的空間，一半位於子元素之上，另一半位於子元素之下)/baseline(如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對齊)/stretch(默認值,拉伸子元素以填充包含塊) |
| -webkit-box-direction | 在父元素上設置,排列順序 | normal(默認,以默認方向顯示子元素)/reverse(以反方向顯示子元素。)/inherit(從子元素繼承 box-direction 屬性的值) |
| -webkit-box-flex-group | 在子元素上設置,以組為單位的流體系數 | 默認值:1 |
| -webkit-box-ordinal-group | 在子元素上設置,以組為單位的排列方向 | 默認值:1 |
| -webkit-box-pack | 在父元素上設置,子元素水平方向的對齊方式 | center(均等地分割多余空間，其中一半空間被置於首個子元素前，另一半被置於最后一個子元素后) /justify(在每個子元素之間分割多余的空間（首個子元素前和最后一個子元素后沒有多余的空間）) /start[對於正常方向的框，首個子元素的左邊緣被放在左側（最后的子元素后是所有剩余的空間）對於相反方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）] /end[對於正常方向的框，最后子元素的右邊緣被放在右側（首個子元素前是所有剩余的空間）。對於相反方向的框，首個子元素的左邊緣被放在左側（最后子元素后是所有剩余的空間）。] |
| -webkit-box-lines | 子元素是否換行,類似word-wrap和word-break | single(將被放置在單個行或列的所有子元素（元素不適合只會被認為是溢出）)/multiple(box允許擴大到多行，以適應其所有子項) |
eg:-webkit-box-flex案例:
效果圖:
當我們把2的比例系數改為2時:
效果圖:會重新分配:
