Flex布局

Flex布局的基本概念参考阮一峰的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)
注意在felx-direction属性设置为column或column-reverse时，即项目为垂直排列时，应给定一个高度，

<ul class="unicom-tabs vertical" style="height:310px;">
    <li class="active"><span>28</span>发现漏洞</li>
    <li><span>32</span>发现病毒</li>
    <li><span>95</span>体检得分</li>
</ul>

.unicom-tabs{  display: flex;justify-content: space-around; align-items: center; }
.unicom-tabs.vertical{ flex-direction:column; }
.unicom-tabs li{ font-size: 14px; line-height: 32px; text-align: center; cursor: pointer; color: #3deaff; border: 1px solid transparent;}

这样，justify-content: space-around;才可以生效，生成效果如图：

否则会挤在一起：