CSS3中的flex布局是一種強大并且靈活的布局方式，提供了一個優雅的方式去分配空間和對齊元素。 它特別適合于在響應式設計中創建可擴展和自適應的布局。

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

使用flex-wrap屬性可以允許子元素自動換行到下一行。默認的值是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;
}
}

在響應式設計中，我們可以使用媒體查詢來改變flex容器的方向。在上面的代碼中，當屏幕小于768px時，容器會變為垂直方向。

.item {
flex: 1 0 25%;
}

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

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