flex—骰子四点
弹性盒菜鸟教程
给最外面弹性容器box设置:
display: flex;
justify-content: space-around;
flex-direction: column;
给内层弹性盒column设置
.column{
display: flex;
justify-content: space-around;
}
源码:
<div class="box">
<div class="column">
<div class="item">1</div>
<div class="item">2</div>
</div>
<div class="column">
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
.box{
height: 80px;
width: 80px;
background-color: wheat;
border-radius: 10px;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.column{
display: flex;
justify-content: space-around;
}
.item{
height: 15px;
width: 15px;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 15px;
font-size: 12px;
}