flex-direction

用於控制 flex 項目方向的通用類別。

Class Styles

Class	Styles
`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;

範例（Examples）

使用 flex-row 將 flex 項目水平排列，方向與文字相同：

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

使用 flex-row-reverse 將 flex 項目水平反向排列：

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

使用 flex-col 將 flex 項目垂直排列：

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

使用 flex-col-reverse 將 flex 項目垂直反向排列：

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

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

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

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