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;
}