學習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;
}