前端佈局

基礎佈局，主要展現在移動端，pc端同樣適用。分為一欄、兩欄、三欄、四欄。
這裡使用了兩種方式實現。
首先設定基礎樣式：

/*==================common css start================*/
    ul{
        list-style: none;
        background: #f0f1f1;
        padding: 30px 15px;
    }
    li{
        background: #fff;
        text-align: center;
        border: 1px solid #5d2a22;
        padding: 15px;
        box-sizing: border-box;
    }
    .clearfix::after{
        content:"";
        display: block;
        clear: both;
    }
/*==================common css end================*/
/*==================html start================*/
    <!--一列-->
 

    <ul class="one clearfix">
        <li>入選CCTV中國年度品牌</li>
        <li>獲得Hair代理權</li>
        <li>簽署5G篩查合作協議</li>
        <li>全國開設近20家分院</li>
    </ul>

    <!--兩列-->
    <ul class="two clearfix">
        <li>入選CCTV中國年度品牌</li
 
>
        <li>獲得Hair代理權</li>
        <li>簽署5G篩查合作協議</li>
        <li>全國開設近20家分院</li>
    </ul>

    <!--三列-->
    <ul class="three clearfix">
        <li>入選CCTV中國</li>
        <li>獲得Hair代理權</li>
        <li>簽署5G篩查合作協議</li
 
>
        <li>全國開設近20家</li>
        <li>瞭解植髮需求</li>
        <li> 推薦專業醫師</li>
    </ul>

    <!--四列-->
    <ul class="four clearfix">
        <li>諮詢</li>
        <li>定位</li>
        <li>檢測</li>
        <li>定製</li>
        <li>輔助</li>
        <li>養護</li>
        <li>諮詢</li>
        <li>定製</li>
    </ul>
/*==================html end================*/

1. 傳統計算方式：浮動+寬度精確計算

       /*==============傳統(浮動+清浮動+寬度精確計算) start=================*/
           /*.one li:nth-child(n+2){
               margin-top: 15px;
           }
           .two li{
               float: left;
               width: 48%;
           }
           .two li:nth-child(even){
               margin-left: 4%;
           }
           .two li:nth-child(n+3){
               margin-top: 15px;
           }
           .three li{
               float: left;
               width: 32%;
               margin-left:2%
           }
           .three li:nth-child(3n-2){
               margin-left:0%
           }
           .three li:nth-child(n+4){
               margin-top: 15px;
           }
           .four li{
               float: left;
               width: 22%;
               margin-left:4%
           }
           .four li:nth-child(4n-3){
               margin-left: 0;
           }
           .four li:nth-child(n+5){
               margin-top: 15px;
           }*/
           /*==============傳統(浮動+清浮動+寬度精確計算) end=================*/

2. flex計算方式：flex

           /*================flex(按照需求設定寬度) start=================*/
           /*為方便檢視，這裡不單獨去掉clearfix類名了*/
           .clearfix::after{
               content: none;
           }
           ul{
               display: flex;
               flex-wrap: wrap;
               justify-content: space-between;
           }
           .one li{
               width: 100%;
           }
           .one li:nth-child(n+2){
               margin-top: 15px;
           }
           .two li{
               width: 48%;
           }
           .two li:nth-child(n+3){
               margin-top: 15px;
           }
           .three li{
               width: 32%;
           }
           .three li:nth-child(n+4){
               margin-top: 15px;
           }
           .four li{
               width: 23%;
           }
           .four li:nth-child(n+5){
               margin-top: 15px;
           }
           /*================flex(按照需求設定寬度) end=================*/

   兩種方式實現的效果一樣，如下圖：
   

總結

使用方式一的話，需要精確計算元素的寬度和元素的間隔，稍微有點偏差，佈局就會被打亂。
使用方式二，只需要考慮元素寬度即可，使用justify-content: space-between;就可以實現分散居中的效果。
如果想了解更多flex佈局，參考大神的文件吧
Flex 佈局教程：語法篇 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Flex 佈局示例 http://static.vgee.cn/static/index.html