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