内容简介：有時候 Item 並沒有完全均分 Container，而希望其間距相等，也就是剩餘寬度被間距均分，此時可使用WebStorm 2019.1.3Safari 12.1.1
有時候 Item 並沒有完全均分 Container，而希望其間距相等，也就是剩餘寬度被間距均分，此時可使用 justify-content 的 space 系列設定。
Version
WebStorm 2019.1.3
Safari 12.1.1
CSS 3
HTML
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
</div>
</body>
</html>
對 3 個 <div> 做 layout。
Space Between
RGB 並沒有均分 container，但 紫色 間距是相等的。
style.css
.box {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 960px;
height: 240px;
margin: auto;
background-color: #d3d3d3;
}
.item {
width: 230px;
}
.item1 {
background-color: #faa;
}
.item2 {
background-color: #afa;
}
.item3 {
background-color: #aff;
}
第 １行
.box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
flex-direction 為 row ，表示內容為 由左至右 。
justify-content 為 space-between ，表示：
-
Item 與 item 間隔平分 container 剩下寬度
-
第一個 item 與最後一個 item 都貼齊 container，不使用 container 剩下寬度
Space Around
.box {
display: flex;
flex-direction: row;
justify-content: space-around;
}
flex-direction 為 row ，表示內容為 由左至右 。
justify-content 為 space-around ，表示：
-
Item 與 item 間隔平分 container 剩下寬度
-
第一個 item 與最後一個 item 也會使用 container 剩下寬度，但只有 item 與 item 間寬度的一半
Space Evenly
.box {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
flex-direction 為 row ，表示內容為 由左至右 。
justify-content 為 space-evenly ，表示：
-
Item 與 item 間隔平分 container 剩下寬度
-
第一個 item 與最後一個 item 也會使用 container 剩下寬度，與 item 與 item 間寬度相等
Conclusion
- 實務上
space-between與space-around較常使用，可平分 container 剩下寬度
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
