<! DOCTYPE html>
<title></title>
<style type= "Text/css" >
. Dice {
width:30px;
height:30px;
border-radius:20px;
Background-color: #fff;
}
. onecontainer {
width:100px;
height:100px;
Background-color: #000;
Display:flex;
Justify-content:center;
Align-items:center;
border-radius:20px;
margin-bottom:30px;
}
. twocontainer {
width:100px;
height:100px;
Background-color: #000;
Display:flex;
Justify-content:space-around;
border-radius:20px;
margin-bottom:30px;
}
. Twocontainer. Dice:nth-child (2) {
Align-self:flex-end;
}
. threecontainer {
width:100px;
height:100px;
Background-color: #000;
Display:flex;
Justify-content:space-around;
border-radius:20px;
margin-bottom:30px;
}
. Threecontainer. Dice:nth-child (2) {
Align-self:center;
}
. Threecontainer. Dice:nth-child (3) {
Align-self:flex-end;
}
. fourcontainer {
width:100px;
height:100px;
Background-color: #000;
Display:flex;
Justify-content:space-around;
border-radius:20px;
margin-bottom:30px;
}
. Fourcontainer. Colum {
Display:flex;
Flex-direction:column;
Justify-content:space-around;
}
. fivecontainer {
width:100px;
height:100px;
Background-color: #000;
Display:flex;
Justify-content:space-around;
border-radius:20px;
margin-bottom:30px;
}
. Fivecontainer. Colum {
Display:flex;
Flex-direction:column;
Justify-content:space-around;
}
. Fivecontainer. Dice {
Align-self:center;
}
. sixcontainer {
width:100px;
height:100px;
Background-color: #000;
Display:flex;
Justify-content:space-around;
border-radius:20px;
}
. Sixcontainer. Colum {
Align-self:center;
}
</style>
<body>
<div class= "Onecontainer" >
<div class= "Dice" ></div>
</div>
<div class= "Twocontainer" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
<div class= "Threecontainer" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
<div class= "Fourcontainer" >
<div class= "Colum" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
<div class= "Colum" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
</div>
<div class= "Fivecontainer" >
<div class= "Colum" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
<div class= "Dice" ></div>
<div class= "Colum" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
</div>
<div class= "Sixcontainer" >
<div class= "Colum" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
<div class= "Colum" >
<div class= "Dice" ></div>
<div class= "Dice" ></div>
<div class= "Dice" ></div>
</div>
</div>
</body>
Flexbox Box Model