在列表展示中，经常会使用卡片的内容展示形式，为了美观，常常要求各卡片间的间隙是一致的。
卡片内容不一样可能高度不等，但一般来说为了整体的一致性，会限制每个卡片的宽高都相等。
本文就基于宽高一致的多个卡片，在不同屏幕大小下，每行卡片数量可能有调整，考量如何实现等间隙的布局。
点我预览
放置一张张卡片项，为了设置间距，最常见的就是直接使用一个特定的margin值了，这种方式虽然可以（通过精确计算后确实也可以）
直接设置一个间距，比如统一 margin-left 和 margin-bottom都为 20px ，并不能保证每行最后一个卡片之后的间距是20px
关于如何定这个 margin的值，需要通过一个规则来计算，这个后文再说明
设置同等间距，常用的还有 flex布局中的 justify-content: space-between，可以定义各子项目以相同间距布局，但不好处理左右子项目与边框的间距。 space-around这个就更用不得了，会使得左右子项目右margin == 左margin * 2
所以最终还是回到使用margin值来设置，通过一个可用的规则，来保证间距是一致的。
先把基本结构搭上
<div class="container"> <h2>项目列表</h2> <ul class="proj-items"></ul> </div> <!-- 模板结构 --> <script type="text/template" id="proj-item-tpl"> <li class="proj-item"> <a href="#/p/{{projectID}}"> <h3 class="proj-item__title">{{projectName}}</h3> <p class="proj-item__author">{{author}}</p> </a> </li> </script>