内容简介：有時候 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 剩下寬度
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 【重温基础】18.相等性判断
- php比较两个浮点数是否相等
- c# – 比较两个(Integer)列表是否相等
- 在 Python 中判断两个浮点数的相等
- C#相等判断实例报错分析及解决
- JS面试题之比较两个对象是否相等？
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Machine Learning in Action
Peter Harrington / Manning Publications / 2012-4-19 / GBP 29.99
It's been said that data is the new "dirt"—the raw material from which and on which you build the structures of the modern world. And like dirt, data can seem like a limitless, undifferentiated mass. ......一起来看看 《Machine Learning in Action》 这本书的介绍吧!
