1.justify-content屬性介紹
對(duì)容器進(jìn)行display: flex布局之后，可通過(guò)justify-content來(lái)調(diào)整容器中子元素整體的布局的位置，其值分別有如下幾個(gè)：
注：以下情況均由主軸為從左到右方向進(jìn)行，其從下到上的主軸情況原理類(lèi)似
- flex-start（默認(rèn)值）
即默認(rèn)狀態(tài)下的在主軸的左邊位置，頁(yè)面代碼如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
display: flex;
margin: 0px auto;
width: 800px;
height: 200px;
background-color: purple;
justify-content: flex-start;
}
.item {
background-color: red;
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
其效果如下：
justify-content: flex-start效果
- flex-end
其flex-end則是在主軸的右邊位置，效果如下圖所示：
justify-content: flex-end效果
-
center
設(shè)置為center值之后，其子元素整體的位置則是在主軸的中心位置，其效果如下：
justify-content：center效果 -
space-around
該值會(huì)將主軸上剩余空間平均的充斥在各個(gè)子元素的周?chē)?lèi)似于有相同的margin-left以及margin-right），效果如下圖所示：
justify-content: space-around效果 - space-between
space-between與space-around造成的效果類(lèi)似，稍有不同的為其第一個(gè)子項(xiàng)與最后一個(gè)和容器直接沒(méi)有間隔，其效果如下：
justify-content：space-between效果
注其第一個(gè)之所以有是因?yàn)?，我設(shè)置的margin-left：10px的原因
自己先給自己點(diǎn)個(gè)贊，沖??！咱是最棒的！嘿嘿！觀看的小可愛(ài)一起點(diǎn)個(gè)贊唄，求求了！
