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

設定元素配置-justify-content (1/6)
CSS3 display:flex 樣式

CSS3 display:flex 樣式

一個作為容器的元素設定了 display: flex 樣式,接下來可以進一步設定 justify-content 樣式,以調整其中元素配置的對應位置,可能的值如下:

justify-content: flex-start        
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around

分別設定不同的值可以得到以下的效果:

justify-content: center
A
B
C
D
justify-content: flex-start
A
B
C
D
justify-content: flex-end
A
B
C
D
justify-content: space-between
A
B
C
D

justify-content: space-around
A
B
C
D

以下為 justify-content 樣式值的意義:

flex-start:元素以起始位置為基礎配置。
flex-end:元素以結束位置為基礎配置。
center:元素置中配置。
space-between:平均分配元素配置。
space-around:平均分配元素配置,第一個元素之前與最後一個元素之後,各保留元素間距的一半寬度。

目前 Chrome 瀏覽器以 -webkit-justify-content 支援 justify-content ,Firefox 則直接支援, IE 10 同樣不支援此標準。

CSS3 display:flex 樣式



2 則留言:

提到...

不好意思,好像有打錯! @@

justify-content 樣式值的意義:
flex-start:元素以結束位置為基礎配置。

flex-start-->flex-end

康廷數位文教網 提到...

感謝,已修正 XD