弹性布局制作骰子布局
时间: 2023-12-23 10:26:52 浏览: 73
CSS3的Flexbox骰子布局的实现及问题讲解
以下是使用弹性布局制作骰子布局的示例代码:
```html
<style>
.dice {
display: flex;
flex-wrap: wrap;
width: 200px;
height: 200px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
.dice div {
flex: 1 1 33.33%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
font-weight: bold;
color: #fff;
}
.dice .dot {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #333;
margin: 5px;
}
</style>
<div class="dice">
<div>
<div class="dot"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
```
阅读全文