CSS自動(dòng)分成兩塊是一種非常實(shí)用的布局方式，特別適用于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。當(dāng)頁(yè)面寬度發(fā)生變化時(shí)，自動(dòng)將頁(yè)面分成兩個(gè)塊，一部分放在左側(cè)，另一部分放在右側(cè)，從而適應(yīng)不同屏幕尺寸的設(shè)備。

/* CSS代碼 */
@media screen and (max-width: 768px) {
.wrapper {
display: flex;
flex-wrap: wrap;
}
.left {
order: 2;
}
.right {
order: 1;
}
}
.wrapper {
display: flex;
}
.left {
flex: 1;
padding-right: 20px;
}
.right {
flex: 1;
padding-left: 20px;
}

通過(guò)以上CSS代碼，我們可以實(shí)現(xiàn)頁(yè)面的自動(dòng)分成兩塊布局。對(duì)于屏幕寬度小于768px的設(shè)備，我們?cè)O(shè)置了@media查詢。在這個(gè)查詢中，我們使用了flexbox布局，并通過(guò)order屬性來(lái)改變左右塊的順序。當(dāng)屏幕寬度大于768px時(shí)，我們默認(rèn)使用左側(cè)為主要內(nèi)容區(qū)域，右側(cè)為邊欄的布局方式，但同時(shí)也有一定的彈性。

這種布局方式可以更好的適應(yīng)各種設(shè)備屏幕，提高網(wǎng)頁(yè)的易用性和用戶體驗(yàn)。此外，它也簡(jiǎn)化了編寫響應(yīng)式網(wǎng)頁(yè)代碼的難度，提高了開(kāi)發(fā)效率。