垂直/水平配置樣式：flex-direction:column/row (2/6) CSS3 display:flex 樣式

》CSS3 display:flex 樣式

當你設定了 display: flex ，便能進一步設定其它相關的樣式，讓其中的子元素進行彈性的排列，最基本的便是 flex-direction 樣式，它決定了元素應該水平配置或是垂直配置，例如以下的配置：

A

B

現在分別指定 flex-direction:column 與　flex-direction:row 樣式，會呈現以下的結果：

flex-direction:column-A

flex-direction:column-B

flex-direction:row-A

flex-direction:row-B

flex-direction:column 表示要將其中的子元素以垂直編排配置，而 flex-direction:row 則是水平方向，這是預設值。而不同的配置，會進一步影響其它樣式的設定效果。

以 justify-content 為例，在「設定元素配置－justify-content」這一篇裏面曾經說明在預設（flex-direction:row）的情形下，幾種不同的 justify-content 樣式值設定效果，如果是 flex-direction:column ，則 justify-content 樣式的配置則是以垂直方向為基礎，同樣的內容展現的配置效果如下：

center

center

center

center

flex-start

flex-start

flex-start

flex-start

flex-end

flex-end

flex-end

flex-end

space-between

space-between

space-between

space-between

space-around

space-around

space-around

space-around

》CSS3 display:flex 樣式