新聞中心
css中justify-content屬性的使用方法?這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容,讓我們一起來看看吧!
css justify-content 用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式,對(duì)齊方式有:位于容器的開頭、位于容器的結(jié)尾、位于容器的中心、均勻分布等等。
css justify-content屬性怎么用?
justify-content 用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式??梢允褂?align-content 屬性對(duì)齊交叉軸上的各項(xiàng)(垂直)。
語法:
justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;
屬性值:
● flex-start:默認(rèn)值。項(xiàng)目位于容器的開頭。
● flex-end:項(xiàng)目位于容器的結(jié)尾。
● center:項(xiàng)目位于容器的中心。
● space-between:項(xiàng)目位于各行之間留有空白的容器內(nèi),即均勻分布在線上; 第一項(xiàng)是在起始行,最后一項(xiàng)是在結(jié)束行。
● space-around:項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。
● initial:設(shè)置該屬性為它的默認(rèn)值。
● inherit:從父元素繼承該屬性。
css justify-content屬性 示例
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
效果圖:
說明:
紅色列表是justify-content屬性設(shè)置為 flex-start
黃色是justify-content屬性設(shè)置為 flex-end
藍(lán)色是justify-content屬性設(shè)置為 center
綠色是justify-content屬性設(shè)置為 space-between
粉紅色是justify-content屬性設(shè)置為 space-around
淺綠色是justify-content屬性設(shè)置為 space-evenly
感謝各位的閱讀!看完上述內(nèi)容,你們對(duì)css中justify-content屬性的使用方法大概了解了嗎?希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。
分享標(biāo)題:css中justify-content屬性的使用方法-創(chuàng)新互聯(lián)
當(dāng)前地址:http://fisionsoft.com.cn/article/djhcgj.html