CSS3 對父級(jí)容器的設(shè)置 2.justify-content
內(nèi)容對齊justify-content屬性應(yīng)用在彈性容器上,把彈性項(xiàng)沿著彈性容器的主軸線(main axis)對齊,語法如下:
justify-content: flex- start | flex- end | center [ space-between | space- around
justify-content屬性的值可以是以下幾種:
?flex-start:默認(rèn)值,頂目位于容器的開頭。彈性頊目向行頭緊挨著填充。第一個(gè)彈性項(xiàng)的main-start外邊距邊線被放置在該行的main-start邊線,而后續(xù)彈性項(xiàng)依次平齊擺放。
?flex-end:項(xiàng)目位于容器的結(jié)尾。彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的main-end外邊距邊線被放置在該行的main-end邊線,而后續(xù)彈性項(xiàng)依次平齊擺放。
?center:項(xiàng)目位于容器的中心。彈性項(xiàng)目居中緊挨著填充。如果剩余的自由空間是負(fù)的,則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出。
?space-between:項(xiàng)目位于各行之間留有空白的容器內(nèi)。彈性項(xiàng)目平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng),則該值等同于flex-sta「t。否則,第一個(gè)彈性項(xiàng)的外邊距和行的main-start邊線對齊,而最后一個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對齊,然后剩余的 彈性項(xiàng)分布在該行上,相鄰頂目的間隔相等。
?space-around:項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。彈性項(xiàng)目平均分布在該行上,兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng),則該值等同于center。否則,彈性項(xiàng)目沿該行分布,且彼此間隔相等(如20px ),同時(shí)首尾兩邊和彈性容器之間留有一半的間隔( 1/2*20px=10px )。
?initial:設(shè)置該屬性為它的默認(rèn)值。
? inherit:從父元素繼承該屬性。
下面通過實(shí)例來理解justify-content屬性各個(gè)值的區(qū)別。
【例題】使用justify-content屬性
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 1200px;
height: 800px;
border:5px red solid;
display:flex;
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
}
.content{
width: 100px;
height: 100px;
background: lightpink;
color:#fff;
font-size: 50px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
點(diǎn)擊加載更多評論>>