CSS 列表项布局技巧

现有情况

在开发中我们经常会遇到关于如何展示列表的问题，例如：

图片选择器列表

人员部门选择列表

工作状态列表

通用方法

为了让其看起来更加舒适美观，通常我们会在每个列表项上添加 和 属性来隔开它们，然后一行超过容器长度后进行换行

那么在各种情况下，如何处理列表项中和，让列表间隔和换行看起来更加自然美观是本篇的重点

各种情况下的布局

元素宽度已知，即知道每行最多多少个，且所有元素都在一个容器中

思路：

关键代码：

运行截图：

完整代码：

https://github.com/lawler61/blog/blob/master/css/css-item-layout/1.%E5%85%83%E7%B4%A0%E5%AE%BD%E5%BA%A6%E5%B7%B2%E7%9F%A5%EF%BC%8C%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E9%83%BD%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AE%B9%E5%99%A8.html

元素宽度已知 或 未知，且元素按照行数在相应容器中

思路：

关键代码：

运行截图：

完整代码：

https://github.com/lawler61/blog/blob/master/css/css-item-layout/2.%E5%85%83%E7%B4%A0%E5%AE%BD%E5%BA%A6%E5%B7%B2%E7%9F%A5%E6%88%96%E6%9C%AA%E7%9F%A5%EF%BC%8C%E4%B8%94%E6%8C%89%E7%85%A7%E8%A1%8C%E6%95%B0%E5%9C%A8%E7%9B%B8%E5%BA%94%E5%AE%B9%E5%99%A8.html

元素宽度未知，即不知道一行最多多少个，且所有元素都在一个容器中，常见于 flex 布局

法1：Flex 布局

思路：

利用 flex 布局的 justify-content 主轴属性来控制元素的间距

缺点：

flex 虽然强大，但是面对 长度不定的列表项布局 还是不能很好满足要求

关键代码：

运行截图：

完整代码：

https://github.com/lawler61/blog/blob/master/css/css-item-layout/3.1%E5%85%83%E7%B4%A0%E5%AE%BD%E5%BA%A6%E6%9C%AA%E7%9F%A5%EF%BC%8C%E4%B8%94%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E9%83%BD%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AE%B9%E5%99%A8.html

法2：负margin

接下来介绍 负margin 方法，可以很好的解决 长度不定的列表项布局 问题

思路：

用一个 wrapper 包在最外层，container 设置 负的 margin 来抵消 item 的 外边距

参考链接：

关键代码：

运行截图：

完整代码：

https://github.com/lawler61/blog/blob/master/css/css-item-layout/3.2%E5%85%83%E7%B4%A0%E5%AE%BD%E5%BA%A6%E6%9C%AA%E7%9F%A5%EF%BC%8C%E4%B8%94%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E9%83%BD%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%AE%B9%E5%99%A8.html

总结

多多利用 css3 属性来帮助我们更好的布局列表，避免使用 js 控制列表项，做到 css 与 js 解耦，更利于项目的维护

以上可能未包含所有情况，欢迎提出或者分享其他更好的解决办法

文 / Lawler61

Learn and to learn.

编 / 荧声

作者Github：

https://github.com/lawler61

作者Blog：

https://www.freeze61.me

感谢您的阅读

欢迎关注、点赞、留言讨论、分享转发支持我们

- 惊喜 -

首位在本文下留言的读者将获赠优酷视频 VIP 月卡一张

经常错过推送？

给创宇前端公众号加上星标吧