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

介紹

有時，我們需要對div標簽進行自適應布局，即是當多個div標簽展示出來，隨著瀏覽器頁面寬度改變，展示div塊個數(shù)也隨之改變。下面利用實例說明如何實現(xiàn)div標簽自適應。

步驟一：插入子div

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

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

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

步驟三：查看效果

保存代碼并打開瀏覽器，查看頁面展示的效果，可以看到div被分塊展示出來。

步驟四：設置子div樣式

利用多層類選擇器，設置子div標簽的樣式屬性，比如display、align-items等。

步驟五：再次查看效果

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

步驟六：微調屬性

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

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