在現(xiàn)代 web 開(kāi)發(fā)中，流式布局已經(jīng)成為了一種十分流行的技術(shù)。通過(guò) CSS 的流式布局，可以讓網(wǎng)站的設(shè)計(jì)更加靈活和適應(yīng)不同的屏幕大小和分辨率，提供更好的用戶體驗(yàn)。下面我們展示一段使用 CSS 實(shí)現(xiàn)基本流式布局的代碼。

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.column {
float: left;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
@media (min-width: 768px) {
.column {
width: 50%;
}
}
@media (min-width: 1200px) {
.column {
width: 33.33%;
}
}

以上代碼定義了一個(gè)包含若干列的容器，容器有一個(gè)最大寬度為 1200px。每個(gè)列都使用了 “box-sizing: border-box” 進(jìn)行內(nèi)邊距的盒模型計(jì)算，使得內(nèi)邊距不會(huì)撐破盒子尺寸。

在大屏幕中，我們將每一列的寬度設(shè)置為容器寬度的三分之一，從而讓三列布局。在中等屏幕中，我們將列寬設(shè)置為容器寬度的一半，從而讓兩列布局。在小于 768px 的視口中，所有列都會(huì)鋪滿寬度，從而實(shí)現(xiàn)了敏捷的響應(yīng)式布局。

這段代碼既簡(jiǎn)單又高效，能夠大大提高我們網(wǎng)站的靈活性和響應(yīng)能力。值得一試！