介紹有時(shí)，我們需要對(duì)div標(biāo)簽進(jìn)行自適應(yīng)布局，即是當(dāng)多個(gè)div標(biāo)簽展示出來(lái)，隨著瀏覽器頁(yè)面寬度改變，展示div塊個(gè)數(shù)也隨之改變。下面利用實(shí)例說(shuō)明如何實(shí)現(xiàn)div標(biāo)簽自適應(yīng)。步驟一：插入子div在已創(chuàng)建好

介紹

有時(shí)，我們需要對(duì)div標(biāo)簽進(jìn)行自適應(yīng)布局，即是當(dāng)多個(gè)div標(biāo)簽展示出來(lái)，隨著瀏覽器頁(yè)面寬度改變，展示div塊個(gè)數(shù)也隨之改變。下面利用實(shí)例說(shuō)明如何實(shí)現(xiàn)div標(biāo)簽自適應(yīng)。

步驟一：插入子div

在已創(chuàng)建好的HTML5頁(yè)面，插入四個(gè)子div，分別設(shè)置class屬性。

步驟二：設(shè)置內(nèi)外間距和列數(shù)

利用CSS中的通配符設(shè)置全局內(nèi)外間距，使用外層div標(biāo)簽類(lèi)選擇器設(shè)置column-count屬性。

步驟三：查看效果

保存代碼并打開(kāi)瀏覽器，查看頁(yè)面展示的效果，可以看到div被分塊展示出來(lái)。

步驟四：設(shè)置子div樣式

利用多層類(lèi)選擇器，設(shè)置子div標(biāo)簽的樣式屬性，比如display、align-items等。

步驟五：再次查看效果

保存代碼并查看頁(yè)面展示的效果，可以發(fā)現(xiàn)展示四個(gè)顏色塊，字體居中顯示。

步驟六：微調(diào)屬性

對(duì)父子div中的某個(gè)屬性進(jìn)行微調(diào)，然后再次保存并查看頁(yè)面效果，可以看到布局發(fā)生了微小的改變。

這些步驟將幫助你使用CSS3中的flex對(duì)div進(jìn)行分塊展示并布局。通過(guò)靈活調(diào)整屬性，你可以實(shí)現(xiàn)自適應(yīng)的布局效果，使得div在不同設(shè)備上都能展示出最佳的效果。