》CSS3 display:flex 樣式
當你設定了 display: flex ，便能進一步設定其它相關的樣式，讓其中的子元素進行彈性的排列，最基本的便是 flex-direction 樣式，它決定了元素應該水平配置或是垂直配置，例如以下的配置：
現在分別指定 flex-direction:column 與 flex-direction:row 樣式，會呈現以下的結果：
flex-direction:column 表示要將其中的子元素以垂直編排配置，而 flex-direction:row 則是水平方向，這是預設值。而不同的配置，會進一步影響其它樣式的設定效果。
以 justify-content 為例，在「設定元素配置－justify-content」這一篇裏面曾經說明在預設（flex-direction:row）的情形下，幾種不同的 justify-content 樣式值設定效果，如果是 flex-direction:column ，則 justify-content 樣式的配置則是以垂直方向為基礎，同樣的內容展現的配置效果如下：
》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 樣式的配置則是以垂直方向為基礎，同樣的內容展現的配置效果如下：
沒有留言:
張貼留言