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