Flexbox & Grid
flex-wrap
用於控制彈性項目如何換行的實用工具。
| 類別 | 樣式 |
|---|---|
flex-nowrap | flex-wrap: nowrap; |
flex-wrap | flex-wrap: wrap; |
flex-wrap-reverse | flex-wrap: wrap-reverse; |
範例
不換行
使用 flex-nowrap 防止彈性項目換行，必要時導致不靈活的項目溢出容器
01
02
03
<div class="flex flex-nowrap"> <div>01</div> <div>02</div> <div>03</div></div>正常換行
使用 flex-wrap 允許彈性項目換行
01
02
03
<div class="flex flex-wrap"> <div>01</div> <div>02</div> <div>03</div></div>反向換行
使用 flex-wrap-reverse 以相反方向換行彈性項目
01
02
03
<div class="flex flex-wrap-reverse"> <div>01</div> <div>02</div> <div>03</div></div>響應式設計
前綴a flex-wrap 實用工具 與中斷點變體（例如 md:）搭配使用，僅在中 螢幕尺寸及以上套用實用工具
<div class="flex flex-wrap md:flex-wrap-reverse ..."> <!-- ... --></div>深入瞭解如何在變體文件中使用變體。
