CSS3 對父級容器的設置 2.justify-content
內容對齊justify-content屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis)對齊，語法如下：
justify-content: flex- start | flex- end | center [ space-between | space- around
justify-content屬性的值可以是以下幾種：
?flex-start：默認值，頂目位于容器的開頭。彈性頊目向行頭緊挨著填充。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續(xù)彈性項依次平齊擺放。
?flex-end：項目位于容器的結尾。彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續(xù)彈性項依次平齊擺放。
?center：項目位于容器的中心。彈性項目居中緊挨著填充。如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出。
?space-between：項目位于各行之間留有空白的容器內。彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同于flex-sta「t。否則，第一個彈性項的外邊距和行的main-start邊線對齊，而最后一個彈性項的外邊距和行的main-end邊線對齊，然后剩余的 彈性項分布在該行上，相鄰頂目的間隔相等。
?space-around：項目位于各行之前、之間、之后都留有空白的容器內。彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（如20px ),同時首尾兩邊和彈性容器之間留有一半的間隔（ 1/2*20px=10px )。
?initial：設置該屬性為它的默認值。
? inherit：從父元素繼承該屬性。
下面通過實例來理解justify-content屬性各個值的區(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>
湘公網安備:43011102000856號 
點擊加載更多評論>>