前端布局的基本布局，主要在移动端展示，同时也适用于PC端。分为一栏、二栏、三栏、四栏。有两种方法可以实现这一点。首先设置基本样式：/*===================commoncssstart==================*/ul{列表样式：无；背景：#f0f1f1；填充：30px15px；}li{背景：#fff;文本对齐：居中；边框：1px实心#5d2a22；填充：15px；::之后{内容：“”；显示：块；明确：两者；}/*=====================commoncssend=================*//*===================html开始===================*/
入选CCTV中国年度品牌收购发代理机构签署5G放映合作协议li>
开启全国近20家分公司入选CCTV中国年度品牌获发代理权签署5G放映合作协议在全国开设近20家分公司<!--三栏-->入选央视中国获得发代理权签署5G放映合作协议全国近20家门店了解植发需求推荐专业医生咨询定位检测定制辅助维护咨询定制/*====================htmlend==================*/传统计算方式：float+精确宽度计算/*================传统（float+清除浮动+精确计算宽度)start====================*//*.oneli:nth-child(n+2){margin-top:15px;}.twoli{float:left;宽度：48%；}.twoli:nth-child(even){margin-left:4%;}.二里:nth-child(n+3){margin-top:15px;}.threeli{浮动：左；宽度：32%；margin-left:2%}.threeli:nth-child(3n-2){margin-left:0%}.threeli:nth-child(n+4){margin-top:15px;}.fourli{浮动：左；宽度：22%；margin-left:4%}.fourli:nth-child(4n-3){margin-left:0;}.fourli:nth-child(n+5){margin-top:15px;}*//*==============传统（浮动+清除浮动+精确宽度计算）end==================*/flex计算方式：flex/*================flex（根据要求设置宽度）start==================*//*为了查看方便，这里没有单独去掉clearfix类名*/.clearfix::after{content:none;}ul{显示：flex;弹性包装：包装；证明内容：空格之间；}.oneli{宽度：100%；.oneli:nth-child(n+2){顶部边距：15px；}.twoli{width:48%;}.twoli:nth-child(n+3){margin-top:15px;}.threeli{width:32%;}.threeli:nth-child(n+4){margin-top:15px;}.fourli{width:23%;}.fourli:nth-child(n+5){margin-top:15px;}/*================FLEX（根据需求设置宽度）END================两种方法实现的效果是一样的，如下图：综上所述，如果使用第一种方法，需要准确计算出元素和元素之间的间隔。证明内容：空格之间；可以达到分散和居中的效果。如果想了解更多关于flex布局的知识，请参考大神Flex布局教程文档：语法http://www.ruanyifeng.com/blo...Flex布局实例http://static.vgee.cn/静止的/..。
