<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
.box1 {
width: 400px;
height: 400px;
background-color: red;
display: flex;
flex-direction: column;
/* 主轴在交叉轴 */
justify-content: space-evenly;
align-items: center; //代替子盒子的margin:auto
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
/* margin: auto; */
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
/* margin: auto; */
}
.box4 {
width: 100px;
height: 100px;
background-color: green;
/* margin: auto; */
}