flex布局——align-items屬性垂直之共有flex-start、center、flex-end& justify-content屬性水平之space-around、space-between
對容器進(jìn)行display: flex布局之后，可通過justify-content來調(diào)整容器中子元素整體的布局的位置，其值分別有如下幾個(gè)：
注：以下情況均由主軸為從左到右方向進(jìn)行，其從下到上的主軸情況原理類似
- flex-start（默認(rèn)值）
即默認(rèn)狀態(tài)下的在主軸的左邊位置，頁面代碼如下：
/* align-items: flex-start; */
justify-content: flex-start;
效果-水平-開頭
-
center
設(shè)置為center值之后，其子元素整體的位置則是在主軸的中心位置，其效果如下：
align-items: center; // 垂直居中
效果-水平-中心
justify-content: center; //水平-居中
效果
-
flex-end
其flex-end則是在主軸的右邊位置，效果如下圖所示：
align-items: flex-end; // 垂直結(jié)尾
效果-水平-結(jié)尾
justify-content: flex-end // 水平結(jié)尾
效果
- space-around-中間間隔
該值會(huì)將主軸上剩余空間平均的充斥在各個(gè)子元素的周圍（類似于有相同的margin-left以及margin-right），效果如下圖所示：
justify-content: space-around; // 中間間隔
- space-between-兩邊撐開
space-between與space-around造成的效果類似，稍有不同的為其第一個(gè)子項(xiàng)與最后一個(gè)和容器直接沒有間隔，其效果如下：
justify-content: space-between; // 兩邊撐開
文章來源：http://www.zghlxwxcb.cn/news/detail-804093.html
代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-804093.html
即默認(rèn)狀態(tài)下的在側(cè)軸的上邊位置，頁面代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
display: flex;
margin: 0px auto;
width: 800px;
height: 400px;
background-color: purple;
align-items: flex-start;
/* align-items: center; */
/* align-items: flex-end; */
}
.item {
background-color: pink;
margin-left: 10px;
margin-top: 10px;
width: 250px;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
到了這里，關(guān)于flex布局——align-items屬性垂直之共有flex-start、center、flex-end& justify-content屬性水平之space-around、space-between的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
