CSS中的flex布局是一種非常方便靈活的布局方式，可以輕松實(shí)現(xiàn)各種復(fù)雜的布局效果。其中一個(gè)常見的需求是，當(dāng)flex容器中的子元素寬度超出容器寬度時(shí)，希望能自動(dòng)換行顯示。這個(gè)需求在移動(dòng)端尤為常見。

實(shí)現(xiàn)這個(gè)需求非常簡(jiǎn)單，只需要在flex容器上加上一個(gè)flex-wrap: wrap的屬性值即可。例如：

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

這樣設(shè)置之后，當(dāng)子元素的寬度超出容器寬度時(shí)，會(huì)自動(dòng)換行顯示。同時(shí)，flex布局還會(huì)自動(dòng)處理行高和垂直對(duì)齊等問題，非常方便。

如果需要調(diào)整換行方向，可以使用flex-flow屬性，這個(gè)屬性包含了flex-wrap和flex-direction兩個(gè)屬性的取值。例如，如果需要從右向左自動(dòng)換行，可以這樣設(shè)置：

.container {
display: flex;
flex-flow: row-wrap-reverse;
}

這樣設(shè)置之后，當(dāng)子元素寬度超出容器寬度時(shí)，會(huì)從右向左自動(dòng)換行顯示。

總體來說，flex布局是一種非常強(qiáng)大的布局方式，通過簡(jiǎn)單的幾行代碼就可以實(shí)現(xiàn)各種復(fù)雜的布局效果，非常方便。