编者按：
为了不引入 HTML 标签自身的样式，本文未考虑 HTML 语义化的提倡，以使得行文与示例代码更加简洁。这是文章写作需要，而非代码风格示范。
在开发中我们经常会遇到关于如何展示列表的问题，例如：
图片选择器列表
人员部门选择列表
工作状态列表
通用方法
为了让其看起来更加舒适美观，通常我们会在每个列表项上添加margin-right和margin-bottom属性来隔开它们，然后一行超过容器长度后进行换行
那么在各种情况下，如何处理列表项中margin-right和margin-bottom，让列表间隔和换行看起来更加自然美观是本篇的重点
各种情况下的布局
元素宽度已知，即知道每行最多多少个，且所有元素都在一个容器中
思路：item 在一个容器中，每第三个去掉 margin-right，最后三个取消 margin-bottom（如最后一行不满 3 个也不影响）
关键代码
运行截图
完整代码：元素宽度已知，所有元素都在一个容器
元素宽度已知 或 未知，且元素按照行数在相应容器中
思路：最后一个 container 去掉 margin-bottom，最后一个 item 去掉 magin-right
关键代码
运行截图
完整代码：元素宽度已知或未知，且按照行数在相应容器
元素宽度未知，即不知道一行最多多少个，且所有元素都在一个容器中，常见于 flex 布局
法1：Flex 布局
思路：利用 flex 布局的 justify-content 主轴属性来控制元素的间距
缺点：flex 虽然强大，但是面对 长度不定的列表项布局 还是不能很好满足要求
关键代码
运行截图
完整代码：元素宽度已知或未知，且按照行数在相应容器
法2：负margin
接下来介绍 负margin 方法，可以很好的解决 长度不定的列表项布局 问题
思路：用一个 wrapper 包在最外层，container 设置 负的 margin 来抵消 item 的 外边距
参考链接：https://segmentfault.com/q/1010000005882081/a-1020000005894468
关键代码
运行截图
完整代码：法2：元素宽度未知，且所有元素都在一个容器
总结
多多利用 css3 属性来帮助我们更好的布局列表，避免使用 js 控制列表项，做到 css 与 js 解耦，更利于项目的维护
以上可能未包含所有情况，欢迎提出或者分享其他更好的解决办法
本文由创宇前端作者授权发布，版权属于作者，创宇前端出品。
原文链接：https://knownsec-fed.com/2018-12-13-css-lie-biao-xiang-bu-ju-ji-qiao/
最后：“相信有很多想学前端的小伙伴，今年年初我花了一个月整理了一份最适合2018年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5等都有整理，送给每一位前端小伙伴，53763，1707这里是小白聚集地，欢迎初学和进阶中的小伙伴。”
祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
网友评论