css基礎多欄佈局

前端佈局

基礎佈局，主要展示在移動端，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/blo...
Flex 佈局示例 http://static.vgee.cn/static/...