昨天写完了第一个页面，本来8-9点就能写完的但是被一个问题困扰到11点多才写完，在页面最后链接的地方要求实现这样的效果

前两个效果30分钟就搞定了，但是最后一个效果出了问题，盒子不居中了，

为了实现这三个效果布局我是这样设计的，一个大的div盒子里面装一个小div盒子，小盒子里在装上4个子盒子，子盒子里用无序列表UL装文字，第一个效果子元素的宽设置成50%，父元素设置成display：flexflex-wrap‍‍:wrap;，第二种效果子元素设置成width：100%；父元素设‍‍置成flex-wrap: wrap;第三个效果子元素‍‍设置成flex-direction:column;父元置   justify-content: center;属性，但是此时父元素 justify-content: center;属性失效了。折腾了两个多小时使用了其他的居中方法但是都不理想，后来经过仔细研究终于搞明白了原因，因为父元素设置了flex-direction:column;属性，这个属性是决定子元素的排列方向column就是垂直方向排列，起点在上方，既然排列方向改变了居中方式也得改变，因为是垂直方向排列，所以想让它水平居中不能用justify-content:center；属性，得用align-content: center;属性，修改完之后文字就居中了，后来我又找到一种方法，利用margin实现居中，如果子元素左右两边的margin一样的话子元素不就居中了吗，我把子元素的margin设置成auto也实现了居中。

‍‍‍‍‍‍‍