内容简介：有時候 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 剩下寬度
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
七周七语言（卷2）
【美】Bruce A. Tate（泰特）、Fred Daoud（达乌德）、Ian Dees（迪斯） / 7ML翻译组 / 人民邮电出版社 / 2016-12 / 59
深入研习对未来编程具有重要意义的7种语言 Lua、Factor、Elixir、Elm、Julia、Idris和MiniKanren 本书带领读者认识和学习7种编程语言，旨在帮助读者探索更为强大的编程工具。 本书延续了同系列的畅销书《七周七语言》《七周七数据库》和《七周七Web开发框架》的体例和风格。 全书共8章，前7章介绍了Lua、Factor、Elm、Elixir、Jul......一起来看看 《七周七语言（卷2）》 这本书的介绍吧!
