在开拓中我们常常会碰着关于如何展示列表的问题，例如：
图片选择器列表职员部门选择列表
通用方法
为了让其看起来更加舒适都雅，常日我们会在每个列表项上添加 margin-right 和 margin-bottom 属性来隔开它们，然后一行超过容器长度后进行换行
那么在各种情形下，如何处理列表项中 margin-right 和 margin-bottom ，让列表间隔和换行看起来更加自然都雅是本篇的重点
各种情形下的布局
元素宽度已知，即知道每行最多多少个，且所有元素都在一个容器中
思路：item 在一个容器中，每第三个去掉 margin-right，末了三个取消 margin-bottom（如末了一行不满 3 个也不影响）关键代码<div class='container'> <div class='1f91afc1c910481d item'>宽度已知，最多放三个</div> <div class='afc1c910481d8a68 item'>宽度已知，最多放三个</div> <div class='c910481d8a689ab7 item'>宽度已知，最多放三个</div> ...</div><style>/ scss code /.container { .item { margin-right: 30px; margin-bottom: 20px; &:nth-child(3n) { margin-right: 0; } &:nth-last-child(-n+3) { margin-bottom: 0; } }}</style>运行截图
4. 完全代码： 元素宽度已知，所有元素都在一个容器元素宽度已知 或 未知，且元素按照行数在相应容器中
思路：末了一个 container 去掉 margin-bottom，末了一个 item 去掉 magin-right关键代码<div class='481d8a689ab75852 container'> <div class='8a689ab758529d12 item'></div> <div class='9ab758529d1200ec item'></div></div><div class='58529d1200ec77c6 container'> <div class='9d1200ec77c6fd99 item'></div> <div class='00ec77c6fd99aa6a item'></div> <div class='77c6fd99aa6ac16b item'></div></div><div class='fd99aa6ac16b8f86 container'> <div class='aa6ac16b8f860887 item'></div></div><style>/ scss code /.container { margin-bottom: 20px; &:last-child { margin-bottom: 0; } .item { margin-right: 30px; &:last-child { margin-right: 0; } }}</style>运行截图
完全代码： 元素宽度已知或未知，且按照行数在相应容器元素宽度未知，即不知道一行最多多少个，且所有元素都在一个容器中，常见于 flex 布局
法1：Flex 布局
思路：利用 flex 布局的 justify-content 主轴属性来掌握元素的间距缺陷：flex 虽然强大，但是面对 长度不定的列表项布局 还是不能很好知足哀求关键代码<div class='c16b8f86088762dd container'> <div class='8f86088762dd288e item'>两个可以成一行</div> <div class='faba1f91afc1c910 item'>两个可以成一行</div> <div class='1f91afc1c910481d item'>这三个字</div> <div class='afc1c910481d8a68 item'>独成一行呀独成一行呀独成一行呀独成</div> <div class='c910481d8a689ab7 item'>两个才能成一行呀</div> <div class='481d8a689ab75852 item'>四个</div></div><style>/ scss code /.container { display: flex; flex-wrap: wrap; justify-content: space-between; / 可以考试测验其他值，但效果仍不好 / .item { / margin-right: 30px; 可以不用 m-r，由 flex 来掌握旁边间距 / margin-bottom: 20px; }}运行截图
完全代码： 元素宽度已知或未知，且按照行数在相应容器法2：负margin
接下来先容 负margin 方法，可以很好的办理 长度不定的列表项布局 问题思路：用一个 wrapper 包在最外层，container 设置 负的 margin 来抵消 item 的 外边距参考链接： segmentfault.com/q/101000000…
关键代码<div class=\公众wrapper\"大众> <div class='8a689ab758529d12 container'> <div class='9ab758529d1200ec item'>两个才能成一行呀</div> <div class='58529d1200ec77c6 item'>两个才能成一行呀</div> <div class='9d1200ec77c6fd99 item'>这三个字</div> <div class='00ec77c6fd99aa6a item'>独成一行呀独成一行呀独成一行呀独</div> <div class='77c6fd99aa6ac16b item'>两个才能成一行呀</div> <div class='fd99aa6ac16b8f86 item'>四个</div> </div></div><style>/ scss code /.wrapper { padding: 10px; border: 2px solid rgb(240, 103, 103); .container { display: flex; flex-wrap: wrap; margin-right: -30px; margin-bottom: -20px; .item { margin-right: 30px; margin-bottom: 20px; } }}</style>运行截图
完全代码： 法2：元素宽度未知，且所有元素都在一个容器总结
多多利用 css3 属性来帮助我们更好的布局列表，避免利用 js 掌握列表项，做到 css 与 js 解耦，更利于项目的掩护
以上可能未包含所有情形，欢迎提出或者分享其他更好的办理办法.
