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;才可以生效,生成效果如图:
否则会挤在一起: