弹性盒子练习（骰子）
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性盒子练习（骰子）相关的知识，希望对你有一定的参考价值。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
height: 1000px;
justify-content: space-around;
align-items: center;
}
section{
height: 100px;
width: 100px;
background: #eee;
border-radius: 10px;
display: flex;
}
span{
width: 24px;
height: 24px;
background: green;
border-radius: 50%;
}
/* 第一个 */
body section:first-child{
justify-content: center;
align-items: center;
}
/* 第二个 */
body section:nth-child(2){
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/* 第三个 */
body section:nth-child(3){
flex-direction: column;
justify-content: space-around;
}
body section:nth-child(3) span:nth-child(2){
align-self: center;
}
body section:nth-child(3) span:nth-child(3){
align-self:flex-end
}
/* 第四个 */
body section:nth-child(4){
display: flex;
justify-content: space-around;
}
body section:nth-child(4) article:first-child{
display: flex;
flex-direction: column;
justify-content: space-around;
}
body section:nth-child(4) article:nth-child(2){
display: flex;
flex-direction: column;
justify-content: space-around;
}
/* 第五个 */
body section:nth-child(5){
display: flex;
justify-content: space-around;
}
body section:nth-child(5) article:first-child{
display: flex;
flex-direction: column;
justify-content: space-around;
}
body section:nth-child(5) article:nth-child(2){
display: flex;
flex-direction: column;
justify-content: center;
}
body section:nth-child(5) article:nth-child(3){
display: flex;
flex-direction: column;
justify-content: space-around;
}
/* 第六个 */
body section:nth-child(6){
display: flex;
justify-content: space-around;
}
body section:nth-child(6) article:first-child{
display: flex;
flex-direction: column;
justify-content: space-around;
}
body section:nth-child(6) article:nth-child(2){
display: flex;
flex-direction: column;
justify-content: space-around;
}
</style>
</head>
<body>
<section>
<span></span>
</section>
<section>
<span></span>
<span></span>
</section>
<section>
<span></span>
<span></span>
<span></span>
</section>
<section>
<article>
<span></span>
<span></span>
</article>
<article>
<span></span>
<span></span>
</article>
</section>
<section>
<article>
<span></span>
<span></span>
</article>
<article>
<span></span>
</article>
<article>
<span></span>
<span></span>
</article>
</section>
<section>
<article>
<span></span>
<span></span>
<span></span>
</article>
<article>
<span></span>
<span></span>
<span></span>
</article>
</section>
</body>
</html>
以上是关于弹性盒子练习（骰子）的主要内容，如果未能解决你的问题，请参考以下文章
CSS3--Flex弹性盒子布局: 声明弹性盒子 & 容器的属性