space-evenly：项目以相等的间距定位，但与角落的间距不同。
但是 justify-content: space-evenly;在IE11中不生效，找到一个平替的方法，如下：
justify-content: space-between;
&:before,
&:after {
content: '';
display: block;
}
完整例子如下：
<!DOCTYPE html>
<html>
<head>
<title> CSS justify-content Property </title>
<style>
.box {
display: flex;
flex-direction: column;
border: 1px solid black;
position: fixed;
top: 0;
bottom: 0;
}
.space-evenly{
justify-content: space-evenly;
}
.space-betweenAfterBefore{
justify-content: space-between;
}
.space-betweenAfterBefore:before,
.space-betweenAfterBefore:after {
content: '';
display: block;
}
.box3 {
left: 300px;
}
.box div {
width: 130px;
border: 1px solid black;
background: green;
}
</style>
</head>
<body>
<div class="box space-evenly">
<div>
<p>space-evenly</p>
<p>space-evenly</p>
<p>space-evenly</p>
<p>space-evenly</p>
<p>space-evenly</p>
</div>
<div>
<p>space-evenly</p>
<p>space-evenly</p>
<p>space-evenly</p>
</div>
<div>3<p>space-evenly</p></div>
<div>4<p>space-evenly</p></div>
</div>
<div class="box box3 space-betweenAfterBefore">
<div>
<p>space-between</p>
<p>space-between</p>
<p>space-between</p>
<p>space-between</p>
<p>space-between</p>
</div>
<div>
<p>space-between</p>
<p>space-between</p>
<p>space-between</p>
</div>
<div>3<p>space-between</p></div>
<div>4<p>space-between</p></div>
</div>
</body>
</html>
效果如下：
image.png
网友评论