flex-direction

flex-direction

控制彈性項目的方向的實用工具。

類別樣式

類別	樣式
`flex-row`	`flex-direction: row;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-col`	`flex-direction: column;`
`flex-col-reverse`	`flex-direction: column-reverse;`

flex-row

flex-direction: row;

flex-row-reverse

flex-direction: row-reverse;

flex-col

flex-direction: column;

flex-col-reverse

flex-direction: column-reverse;

範例

使用 flex-row 以與文字相同的方向水平放置彈性項目

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

使用 flex-row-reverse 以相反的方向水平放置彈性項目

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

使用 flex-col 垂直放置彈性項目

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

使用 flex-col-reverse 以相反的方向垂直放置彈性項目

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

前綴a flex-direction 實用工具使用像 md: 的斷點變體，僅在中等螢幕尺寸及以上套用實用工具

<div class="flex flex-col md:flex-row ...">  <!-- ... --></div>

在變體文件中深入了解如何使用變體。