内容简介：有時候 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面试题之比较两个对象是否相等？
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
从界面到网络空间
（美）海姆 / 金吾伦/刘钢 / 上海科技教育出版社 / 2000-7 / 16.40元
计算机急剧改变了20世纪的生活。今天，我们凭借遍及全球的计算机网络加速了过去以广播、报纸和电视形式进行的交流。思想风驰电掣般在全球翻飞。仅在角落中潜伏着已完善的虚拟实在。在虚拟实在吕，我们能将自己沉浸于感官模拟，不仅对现实世界，也对假想世界。当我们开始在真实世界与虚拟世界之间转换时，迈克尔·海姆问，我们对实在的感觉如何改变？在〈从界面到网络空间〉中，海姆探讨了这一问题，以及信息时代其他哲学问题。他......一起来看看 《从界面到网络空间》 这本书的介绍吧!
