这篇文章主要介绍了关于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================*/ - 入选CCTV中国年度品牌
- 获得Hair代理权
- 签署5G筛查合作协议
- 全国开设近20家分院
- 入选CCTV中国年度品牌
- 获得Hair代理权
- 签署5G筛查合作协议
- 全国开设近20家分院
- 入选CCTV中国
- 获得Hair代理权
- 签署5G筛查合作协议
- 全国开设近20家
- 了解植发需求
- 推荐专业医师
- 咨询
- 定位
- 检测
- 定制
- 辅助
- 养护
- 咨询
- 定制
传统计算方式：浮动+宽度精确计算
/*==============传统(浮动+清浮动+宽度精确计算) 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
立即学习“前端免费学习笔记（深入）”；
相关推荐：
CSS基础语法之CSS的3种引入
以上就是css基础多栏布局 的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609864.html
微信扫一扫 
支付宝扫一扫 
