如果对flex布局不了解的或是有疑问的请点击https://blog.csdn.net/lhjuejiang/article/details/80019673
核心代码：
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
justify-content:space-around;display:flex;设置元素为弹性布局（设为容器）
以下的6个属性设置在容器上。
flex-direction:决定主轴的方向（项目的排列方向）：row/row-reverse/column/column-reverse
flex-wrap:决定项目当一行排不下的时候是否换行（默认不换行）:nowrap/wrap/wrap-reverse
flex-flow:是flex-direction和flex-wrap的简写形式（默认为row nowrap）
justify-content:决定了项目在主轴上的对齐方式：flex-start/center/flex-end/space-around/space-between
align-items:决定了项目在交叉轴上的对齐方式:flex-start/flex-end/center/baseline/stretch
align-content:定义了多根轴线的对其方式:flex-start/flex-end/center/space-between/space-around/stretch
以下六个属性设置在项目上（此处不再详细说明，不清楚的请点击上面的网址，里面介绍的很详细）
因为我们下面用到了align-self，所以只说一下align-self,
order
flex-grow
flex-shrink
flex-basis
flex
align-selfalign-self属性允许单个项目有与其他项目不一样的对其方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
该属性的属性值有:auto/flex-start/flex-end/center/baseline/stretch
嗯、OK知识点基本补充完整
下面是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛子</title>
<style>
.container{
width:120px; height:120px;
background-color:#fff;
border:3px solid #ddd;
box-shadow:3px 3px 3px 0px #999;
border-radius:10%;
margin:5px;
display:flex;
float:left;
}
.one{align-items:center; justify-content:center;}
.two1{
justify-content:space-around; align-items:center;
}
.two2{
flex-direction:column;
justify-content:space-around; align-items:center;
}
.three{
flex-direction:column;
justify-content:space-around;
}
.four{
flex-direction:column;
justify-content:space-around;
}
.four > div{
display:flex;
justify-content:space-around;
}
.five{
display:flex;
flex-direction:column;
justify-content:space-around;
align-content:center;
}
.five > div{
display:flex;
justify-content:space-around;
}
.six{
display:flex;
flex-direction:column;
justify-content:space-around;
align-content:center;
}
.six > div{
display:flex;
justify-content:space-around;
}
.item{
width:20px; height:20px;
background-color:#999;
box-shadow:1px 1px 2px 0 #999;
border-radius:50%;
}
.item1{
align-self:center;
}
.item2{
align-self:flex-end;
}
</style>
</head>
<body>
<!--第一个筛子-->
<div class="container one">
<div class="item"></div>
</div>
<!--第二个筛子-->
<div class="container two1">
<div class="item"></div>
<div class="item"></div>
</div>
<!--第二个筛子-->
<div class="container two2">
<div class="item"></div>
<div class="item"></div>
</div>
<!--第三个筛子-->
<div class="container three">
<div class="item"></div>
<div class="item item1"></div>
<div class="item item2"></div>
</div>
<!--第四个筛子-->
<div class="container four">
<div>
<div class="item"></div>
<div class="item "></div>
</div>
<div>
<div class="item "></div>
<div class="item "></div>
</div>
</div>
<!--第五个筛子-->
<div class="container five">
<div>
<div class="item"></div>
<div class="item "></div>
</div>
<div>
<div class="item"></div>
</div>
<div>
<div class="item "></div>
<div class="item "></div>
</div>
</div>
<!--第六个筛子-->
<div class="container six">
<div>
<div class="item"></div>
<div class="item "></div>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div>
<div class="item "></div>
<div class="item "></div>
</div>
</div>
</body>
</html>
