使用CSS Flexbox可轻松实现响应式图片列表。首先创建包含多张图片的容器，设置display: flex、flex-wrap: wrap使图片自动换行，通过gap控制间距；为img设置flex: 1 1 200px保证弹性伸缩与最小宽度，配合max-width和height: auto保持比例；在@media (max-width: 600px)中调整flex基准值为150px以适应小屏；可选添加border-radius、box-shadow及hover缩放提升视觉体验。最终实现无需JavaScript的自适应布局。
使用 CSS Flexbox 制作响应式图片列表非常简单，关键在于利用 flex 容器的弹性布局 和媒体查询来适配不同屏幕尺寸。下面一步步说明如何实现一个美观、自适应的图片列表。
基本 HTML 结构
先创建一个包含图片的容器，每个图片包裹在单独的元素中，便于控制样式：
@@##@@ @@##@@ @@##@@ @@##@@ @@##@@ @@##@@
使用 Flexbox 布局图片
设置容器为 flex 模式，并让子项自动换行、均匀分布：
.image-list {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 图片之间的间距 */
padding: 10px;
}
.image-list img {
flex: 1 1 200px; / 弹性增长、收缩，基础宽度约 200px /
height: auto; / 保持图片比例 /
max-width: 100%; / 防止溢出 /
}
说明：
立即学习“前端免费学习笔记（深入）”；
情感家园企业站5.0 多语言多风格版
下载
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
-
flex-wrap: wrap允许图片在空间不足时换行 -
flex: 1 1 200px表示每张图片最小宽度为 200px，空间充足时可伸展 -
gap控制图片之间的空隙，比 margin 更简洁
增强响应式表现
在小屏幕上进一步优化显示效果，比如限制最小宽度或调整间距：
@media (max-width: 600px) {
.image-list {
gap: 8px;
padding: 8px;
}
.image-list img {
flex: 1 1 150px; / 小屏下更紧凑 /
}
}
这样在手机上也能良好显示，不会出现图片过小或排版错乱的问题。
可选：添加边框或阴影提升视觉效果
让图片看起来更精致：
.image-list img {
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.image-list img:hover {
transform: scale(1.03); / 轻微放大增加交互感 /
}
基本上就这些。通过 Flexbox 的弹性特性，配合简单的 CSS 设置，就能实现一个无需 JavaScript 的响应式图片列表，适配桌面到手机各种设备。
