flex布局练习——实现骰⼦的各个点数效果图如下
实现上⾯效果主要依赖flex布局，话不多说，直接上代码
骰⼦html结构
<ul>
<li>
<span></span>
</li>
<li>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
骰⼦各点css样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
width: 800px;
height: 400px;
margin: 100px auto;
padding: 0 150px;
border-radius: 200px;
background-color: green;
}
li{
display: flex;
justify-content: space-around;
list-style: none;
width: 150px;
height: 150px;
border-radius: 20px;
border-radius: 20px; background-color: #fff;
}
li:first-child{
align-items: center;
}
li:nth-child(2){
flex-direction: column;
align-items: center;
}
li:nth-child(3){
padding: 20px 0;
}
li:nth-child(4){
flex-wrap: wrap;
align-content: space-around; }
li:nth-child(6){
flex-wrap: wrap;
align-content: space-around; }
li:nth-child(5){
borderboxflex-wrap: wrap;
justify-content: space-between; align-content: space-between; padding: 25px 0;
}
li:nth-child(5) span:nth-child(3){ margin: 0 60px;
}
li:nth-child(3) span:nth-child(2){ align-self: center;
}
li:nth-child(3) span:nth-child(3){ align-self: flex-end;
}
span{
width: 30px;
height: 30px;
border-radius: 50%; background-color: blue;
}
li:first-child span{
width: 40px;
height: 40px;
background-color: red;
}
li:nth-child(4) span{
width: 30px;
height: 30px;
margin: 0 20px; background-color: red;
}
li:nth-child(6) span{ margin: 0 20px; }
li:nth-child(5) span{ margin: 0 20px; }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。