网页HTML5制作flex布局骰子,css利用flex布局画骰子的六个面

主要是利用flex的一些特性来写的，掌握好flex基础，写出筛子的几个页面不是问题。

推荐去我写的一个博客中有flex的小练习 线上练习flex布局

html

css

.shaizi {

width: 1400px;

height: 600px;

margin: auto;

border: 2px solid #ddd;

border-radius: 10px;

padding: 20px;

display: flex;

flex-wrap: wrap;

/* flex-direction: column;; */

}

.item {

display: block;

width: 40px;

height: 40px;

border-radius: 50%;

background-color: #666;

}

.box{

width: 200px;

height: 200px;

border: 2px solid #ccc;

border-radius: 10px;

padding: 20px;

display: flex;

}

.top {

display: flex;

width: 1400px;

justify-content: space-around;

}

.bottom{

display: flex;

width: 1400p