flex-wrap

flex-wrap

用於控制 flex 項目如何換行的通用類別。

Class Styles

flex-nowrap

flex-wrap: nowrap;

flex-wrap

flex-wrap: wrap;

flex-wrap-reverse

flex-wrap: wrap-reverse;

範例（Examples）

使用 flex-nowrap 防止 flex 項目換行，如有必要會使不可伸縮的項目溢出容器：

<div class="flex flex-nowrap">  <div>01</div>  <div>02</div>  <div>03</div></div>

使用 flex-wrap 允許 flex 項目換行：

<div class="flex flex-wrap">  <div>01</div>  <div>02</div>  <div>03</div></div>

使用 flex-wrap-reverse 讓 flex 項目反向換行：

<div class="flex flex-wrap-reverse">  <div>01</div>  <div>02</div>  <div>03</div></div>

在 flex-wrap 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

<div class="flex flex-wrap md:flex-wrap-reverse ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。