熟悉移動布局的程序猿都知道在彈性布局（flexbox）和網格布局（grid）中，都有一個屬性justify-content，space-evenly是其值之一。目的是實現如下效果：
這是什么效果呢？？？
子元素均分容器空間，這是space-between和space-around均無法直接實現的效果。
的確很強大！！！但是我們通過can i use 網站查詢，發現space-evenly的兼容性並不好，像ios的safari，10.3以前版本徹底不支持，10.3開始grid布局支持，但是flexbox布局不支持。
所以我們使用space-evenly要特別小心，應確保瀏覽器的支持，否則無法達到你想要的效果。
能不能用其他的方式實現space-evenly的效果呢？
答案是肯定的，我們可以使用space-between來模擬實現，而在can i use中的查詢，我們發現，space-between的兼容性要好的多，如下圖：
我們可以和上面的space-evenly進行比較，看看瀏覽器的支持是不是好多了。
但是有經驗的程序猿都知道，space-between在子元素的最前和最后是不留空白的，如下圖：
那么我們怎么樣才能在最前和最后留同樣大小的空白呢？有的人會想到space-around，但space-around在最前和最后留的空白是中間空白大小的一半，所以不行的。
但是我們知道space-between在各個子元素中間留的空白大小是相同的，第一個和最后一個元素緊貼兩側，這是space-between的工作原理，根據這個原理，我們可以在容器的最前和最后利用偽元素添加寬度為0的元素，這樣是不是就相當於在第一個和第五個元素兩側加了同樣大小的空白了。
我們看一下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FLex Test</title>
</head>
<style>
body {
margin: 0 auto;
max-width: 960px;
min-width: 320px;
}
.father {
display: flex;
height: 400px;
background: pink;
margin-top: 10px;
flex-flow: row wrap;
justify-content: space-between;
}
.father div {
width: 200px;
height: 200px;
background: skyblue;
/* margin-right: 5px; */
}
.father::before,
.father::after {
content: '';
display: block;
}
</style>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<!-- <div class="son">5</div> -->
</div>
</body>
</html>
————————————————
版權聲明：本文為CSDN博主「一起學習前端吧」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/sweetsoft/article/details/113817572