實(shí)例

在彈性盒對(duì)象的 <div> 元素中的各項(xiàng)周?chē)粲锌瞻?#xff1a;

div

{

display: flex;

justify-content: space-around;

}

復(fù)制 效果預(yù)覽

---

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。

緊跟在 -webkit-, -ms- 或 -moz- 后的數(shù)字為支持該前綴屬性的第一個(gè)版本。

屬性?????

justify-content	29.0 21.0?-webkit-	11.0	28.0 18.0?-moz-	9.0 6.1?-webkit-	17.0

---

定義和用法

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式。

提示：使用 align-content 屬性對(duì)齊交叉軸上的各項(xiàng)（垂直）。

默認(rèn)值：繼承：可動(dòng)畫(huà)化：版本：JavaScript 語(yǔ)法：

flex-start

否

否。請(qǐng)參閱?CSS3動(dòng)畫(huà)屬性、CSS3動(dòng)畫(huà)實(shí)例。

CSS3

object.style.justifyContent="space-between"?效果預(yù)覽

?

---

CSS 語(yǔ)法

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

屬性值

值描述測(cè)試

flex-start	默認(rèn)值。項(xiàng)目位于容器的開(kāi)頭。	效果預(yù)覽
flex-end	項(xiàng)目位于容器的結(jié)尾。	效果預(yù)覽
center	項(xiàng)目位于容器的中心。	效果預(yù)覽
space-between	項(xiàng)目位于各行之間留有空白的容器內(nèi)。	效果預(yù)覽
space-around	項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。	效果預(yù)覽
initial	設(shè)置該屬性為它的默認(rèn)值。請(qǐng)參閱?initial。	效果預(yù)覽
inherit	從父元素繼承該屬性。請(qǐng)參閱?inherit。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的Flexible 弹性盒子模型之CSS justify-content 属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。