》CSS3 display:flex 樣式
一個作為容器的元素設定了 display: flex 樣式,接下來可以進一步設定 justify-content 樣式,以調整其中元素配置的對應位置,可能的值如下:
分別設定不同的值可以得到以下的效果:
justify-content: center
justify-content: flex-start
justify-content: flex-end
justify-content: space-between
justify-content: space-around
以下為 justify-content 樣式值的意義:
flex-start:元素以起始位置為基礎配置。
flex-end:元素以結束位置為基礎配置。
center:元素置中配置。
space-between:平均分配元素配置。
space-around:平均分配元素配置,第一個元素之前與最後一個元素之後,各保留元素間距的一半寬度。
目前 Chrome 瀏覽器以 -webkit-justify-content 支援 justify-content ,Firefox 則直接支援, IE 10 同樣不支援此標準。
》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
A
B
C
D
A
B
C
D
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
張貼留言