使用 Flexbox 制作响应式图片画廊，通过 display: flex 实现自动排列与换行，结合 flex-wrap、gap 和 flex 属性控制布局间距与自适应，设置 object-fit 保持图片比例，支持悬停缩放效果，适配多设备显示。
使用 Flexbox 制作图片画廊很简单，能实现响应式布局且对齐整齐。核心是利用 display: flex 让容器内的图片自动排列，并通过一些属性控制间距、换行和对齐方式。
基本结构
先准备 HTML 结构，用一个容器包裹多张图片：
设置 Flex 容器
给容器添加 Flex 样式，让图片水平排列并自动换行：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 图片之间的间距 */
padding: 10px;
}
控制图片尺寸与响应性
让图片在不同屏幕下自适应，可以这样设置：
卡通风格海洋生物插画集矢量
卡通风格海洋生物插画集矢量适用于平面设计（用在各种平面媒介上，如海报、宣传册、广告、名片等，为设计增添生动有趣的视觉元素）、网页和界面设计（在网站或移动应用的用户界面中，卡通海洋生物的图像可以用来装饰页面）、教育材料（儿童教育图书或互动学习软件）、动画和视频制作（卡通海洋生物的形象可以用于动画制作）等相关设计的AI格式素材。
0 查看详情 
立即学习“前端免费学习笔记（深入）”；
.gallery img {
flex: 1 1 200px; /* 基础宽度约 200px，可伸缩 */
height: auto;
border-radius: 8px;
object-fit: cover;
transition: transform 0.3s ease;
}
说明：
– flex: 1 1 200px 表示每个图片最小宽度为 200px，空间足够时会拉伸填充。
– height: auto 保持图片比例。
– object-fit: cover 可避免图片变形（适合统一高度的布局）。
– 添加 border-radius 和 transition 能提升视觉效果。
可选：悬停效果
增加一点交互感：
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
基本上就这些。Flex 布局让图片画廊变得灵活又简洁，不依赖固定宽度，适配手机和桌面都能表现良好。
以上就是在css中如何用flex制作图片画廊的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1035039.html
微信扫一扫 
支付宝扫一扫 
