css 多個子項目之間等間距排列

需要實現的效果圖如下：

解決方案一：justify-content: space-evenly; 兼容性不太好

 

<div class="list"> 
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.list{
    width: 100%;
    height: 200px;
    background: #000;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.item{
    width: 100px;
    height: 100px;
    background: red;
}

解決方案二：利用偽元素

<div class="list"> 
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.list {
    width: 100%;
    height: 200px;
    background: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item {
    width: 100px;
    height: 100px;
    background: red;
}
.list:before {
    content: "";
    display: block;
}
.list:after {
    content: "";
    display: block;
}