flex实现四个元素分布在盒子的四个角

首先看一下效果

HTML

<div class="wrapper">
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

CSS

.wrapper {
    
    
    border: 1px solid salmon;
    background-color: salmon;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.wrapper .box {
    
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapper .item {
    
    
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}