設定元素配置-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