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;纔可以生效，生成效果如圖：

否則會擠在一起：