CSS3中的flex布局是一種強(qiáng)大并且靈活的布局方式，提供了一個優(yōu)雅的方式去分配空間和對齊元素。 它特別適合于在響應(yīng)式設(shè)計(jì)中創(chuàng)建可擴(kuò)展和自適應(yīng)的布局。

.container {
display: flex;
flex-wrap: wrap;
}

使用flex-wrap屬性可以允許子元素自動換行到下一行。默認(rèn)的值是nowrap，子元素不換行，即始終在同一行上顯示。

.container {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

同時，我們可以使用justify-content和align-items屬性使子元素在水平和垂直方向上居中對齊。

@media (max-width: 768px) {
.container {
flex-direction: column;
}
}

在響應(yīng)式設(shè)計(jì)中，我們可以使用媒體查詢來改變flex容器的方向。在上面的代碼中，當(dāng)屏幕小于768px時，容器會變?yōu)榇怪狈较颉?/p>

.item {
flex: 1 0 25%;
}

flex屬性包含三個值：flex-grow，flex-shrink和flex-basis。這些值分別表示元素的擴(kuò)展比例，收縮比例和基礎(chǔ)值。在上面的代碼中，item元素的flex-grow值為1，表示可以擴(kuò)展來填充容器中可用的空間，flex-shrink值為0，表示不收縮，flex-basis值為25%，表示每個元素基于容器寬度的25%來分配空間。

總結(jié)：flex布局是一種適用于不同尺寸設(shè)備的靈活布局方式，使用flex-wrap屬性可以讓子元素在多行之間自動換行，使用justify-content和align-items屬性可以讓子元素在水平和垂直方向上居中對齊，使用flex屬性可以控制元素在容器中的擴(kuò)展和收縮比例。