前端布局

基础布局，主要展现在移动端，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================*/

登录后复制入选CCTV中国年度品牌获得Hair代理权签署5G筛查合作协议全国开设近20家分院入选CCTV中国年度品牌获得Hair代理权签署5G筛查合作协议全国开设近20家分院入选CCTV中国获得Hair代理权签署5G筛查合作协议全国开设近20家了解植发需求推荐专业医师咨询定位检测定制辅助养护咨询定制 /*==================html end================*/

传统计算方式：浮动+宽度精确计算

    /*==============传统(浮动+清浮动+宽度精确计算) 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=================*/

登录后复制

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

立即学习“前端免费学习笔记（深入）”；