网页HTML5制作flex布局骰子,flex布局实现骰子

学习flex布局后的实例布局--骰子

具体实现原理可参考阮一峰的Flex 布局教程：实例篇和博客flex布局实现色子

效果图：

骰子.png

代码如下：

flex布局实例--骰子

*{

margin: 0;

padding: 0;

}

body{

background: #000;

display: flex;

flex-wrap: wrap;

}

.box{

width: 100px;

height: 100px;

background: #fff;

border-radius: 20px;

margin: 100px;

padding: 15px;

}

.item{

width: 30px;

height: 30px;

background-color: #000;

border-radius: 30px;

}

.box1{

display: flex;

justify-content: center;

align-items: center;

}

.item1{}

.box2{

display: flex;

flex-direction: column;

justify-content: space-between;

align-items: center;

}

.item2{}

.box3{

display: flex;

}

.item3:nth-child(2){

align-self: center;

}

.item3:nth-child(3){

align-self: flex-end;

}

.box4{

display: flex;

flex-wrap: wrap;

align-content: space-between;

}

.column4{

flex-basis: 100%;

display: flex;

justify-content: space-between;

}

.box5{

display: flex;

flex-wrap: wrap;

align-content: space-between;

}

.column5{

flex-basis: 100%;

display: flex;

justify-content: space-between;

}

.column5:nth-child(2){

justify-content: center;

}

.box6{

display: flex;

flex-wrap: wrap;

align-content: space-between;

}

.column6{

flex-basis: 100%;

display: flex;

justify-content: space-between;

}