利用flex制作筛子

如果对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-self

align-self属性允许单个项目有与其他项目不一样的对其方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

该属性的属性值有:auto/flex-start/flex-end/center/baseline/stretch

嗯、OK知识点基本补充完整

下面是完整的代码