首頁技術(shù)文章正文

彈性盒布局簡介【web前端文章】

更新時(shí)間:2021年01月22日18時(shí)50分來源:傳智教育瀏覽次數(shù):

使用彈性盒布局（Flexible Box）可以輕松地創(chuàng)建響應(yīng)式網(wǎng)頁布局，為盒狀（塊）模型增加了靈活性。彈性盒改進(jìn)了塊模型，既不使用浮動(dòng)，也不會(huì)合并彈性盒容器與其內(nèi)容之間的外邊距。它是一種非常靈活的布局方法，就像幾個(gè)小盒子放在一個(gè)大盒子里一樣，相對獨(dú)立，容易設(shè)置。下面我們看一下彈性盒的結(jié)構(gòu)，如圖1所示。

圖1 彈性盒結(jié)構(gòu)

從圖1可以看出，彈性盒由容器、子元素和軸構(gòu)成，并且默認(rèn)情況下，子元素的排布方向與橫軸的方向是一致的。彈性盒模型可以用簡單的方式滿足很多常見的復(fù)雜的布局需求，它的優(yōu)勢在于開發(fā)人員只是聲明布局應(yīng)該具有的行為，而不需要給出具體的實(shí)現(xiàn)方式。瀏覽器會(huì)負(fù)責(zé)完成實(shí)際的布局。

彈性盒模型幾乎在主流瀏覽器中都得到了支持，如表1所示。

表1 瀏覽器支持情況

什么是彈性盒布局