在css中如何用flex制作图片画廊-css教程-PHP中文网

在css中如何用flex制作图片画廊

P粉602998670

发布： 2025-10-02 23:50:02

原创

948人浏览过

使用 Flexbox 制作响应式图片画廊，通过 display: flex 实现自动排列与换行，结合 flex-wrap、gap 和 flex 属性控制布局间距与自适应，设置 object-fit 保持图片比例，支持悬停缩放效果，适配多设备显示。

在css中如何用flex制作图片画廊

使用 Flexbox 制作图片画廊很简单，能实现响应式布局且对齐整齐。核心是利用 display: flex 让容器内的图片自动排列，并通过一些属性控制间距、换行和对齐方式。

基本结构

先准备 HTML 结构，用一个容器包裹多张图片：

设置 Flex 容器

给容器添加 Flex 样式，让图片水平排列并自动换行：

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 图片之间的间距 */
  padding: 10px;
}

控制图片尺寸与响应性

让图片在不同屏幕下自适应，可以这样设置：

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

立即学习“前端免费学习笔记（深入）”；

.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 能提升视觉效果。