教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-618-4000

彈性盒布局簡(jiǎn)介【web前端文章】

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

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

1611310205123_21.png

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

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

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

表1 瀏覽器支持情況

什么是彈性盒布局




猜你喜歡：

彈性盒布局的4種常用屬性演示【前端技術(shù)文章】

頁(yè)面怎樣排排版更加美觀(guān)？如何清除浮動(dòng)標(biāo)簽？

移動(dòng)端如何單獨(dú)開(kāi)發(fā)不同于pc端的頁(yè)面？

傳智教育web前端課程

0 分享到：
和我們?cè)诰€(xiàn)交談！