核心代码：

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-self

align-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>