现有情况
在开发中我们经常会遇到关于如何展示列表的问题,例如:
图片选择器列表
人员部门选择列表
工作状态列表
通用方法
为了让其看起来更加舒适美观,通常我们会在每个列表项上添加 和 属性来隔开它们,然后一行超过容器长度后进行换行
那么在各种情况下,如何处理列表项中和,让列表间隔和换行看起来更加自然美观是本篇的重点
各种情况下的布局
元素宽度已知,即知道每行最多多少个,且所有元素都在一个容器中
思路:
关键代码:
运行截图:
完整代码:
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 月卡一张
经常错过推送?
给创宇前端公众号加上星标吧
领取专属 10元无门槛券
私享最新 技术干货