css基礎多欄布局

這篇文章主要介紹了關於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/blog/2015/07/flex-grammar.html
Flex 布局樣本 http://static.vgee.cn/static/index.html