flex布局实现骰子
Posted lefthands4
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flex布局实现骰子相关的知识，希望对你有一定的参考价值。
<html>
<head>
<title>111</title>
<style>
#box1{
display:flex;
justify-content:center;
align-items:center;
}
#box2{
display:flex;
justify-content:space-between;
/*flex-direction: column;
align-items: center;*/
}
.item2:nth-child(2){
align-self:flex-end;
}
#box3{
display:flex;
justify-content: space-between;
}
.item3:first-child{
align-self:flex-start;
}
.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;/*解决column不在两边*/
}
.column4 {
flex-basis: 100%;/*?????????????????????????*/
display: flex;
justify-content: space-between;
}
#box5{
display:flex;
flex-wrap: wrap;
align-content:space-between;/*解决column不在两边*/
}
.column5 {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.column55 {
flex-basis: 100%;
display: flex;
justify-content: center;
}
#box6{
display:flex;
flex-wrap: wrap;
align-content:space-between;/*解决column不在两边*/
}
.column6 {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
#box7{
display:flex;
flex-wrap: wrap;
align-content:space-between;/*解决column不在两边*/
}
.column7 {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.column77 {
flex-basis: 100%;
display: flex;
justify-content: center;
}
#box8{
display:flex;
flex-wrap: wrap;
align-content:space-between;/*解决column不在两边*/
}
.column8 {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.column88 {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.item8-center {
display: flex;
/*align-self: center;*/
justify-content:center;
}
#box9{
display:flex;
flex-wrap: wrap;
align-content:space-between;/*解决column不在两边*/
}
.column9 {
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.Grid-cell {
flex: 1;
}
.item{
width:15px;height:15px;border-radius:15px;background-color:#666;
}
.box{
width:60px;height:60px;border-radius:10px;background-color: #ddd;
margin:20px;
float:left;
border:7px solid #ccc;
padding:3px;
}
</style>
</head>
<body>
<div id="box1" class="box">
<span class="item"></span>
</div>
<div id="box2" class="box">
<span class="item2 item"></span>
<span class="item2 item"></span>
</div>
<div id="box3" class="box">
<div class="item3 item" ></div>
<div class="item3 item" ></div>
<div class="item3 item" ></div>
</div>
<div id="box4" class="box">
<div class="column4">
<div class="item4 item"></div>
<div class="item4 item"></div>
</div>
<div class="column4">
<div class="item4 item"></div>
<div class="item4 item