【公告】網站目前停止所有的課程訂閱服務,原有學員權益不受影響,造成不便還請見諒,我們正在打造更多課程以及圖書,包含 Python 為主的課程主題,未來將會合併且擴充目前的課程內容,提供全新課程訂閱服務,感謝學員的支持。
【公告】《Entity Framework 實務精要》 絕版優惠學習活動,是針對最後一批少量書籍絕版的短期特別活動,只提供 20 個名額(剩 4 名),教學影片要在今年暑假過後才會重新開放訂閱,並沒有提供之前單獨購書的讀者,還請見諒, 如果您需要教學影片,屆時再請參與,也感謝讀者學員的支持,我們正在開發更多的教學內容,歡迎與我們一起努力。
《Entity Framework 實務精要》 絕版優惠學習活動》

垂直/水平配置樣式: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 樣式

沒有留言: