使用 Flex 布局结合 margin 可实现响应式图片画廊：1. 设置容器 display: flex 和 flex-wrap: wrap 使图片自动换行；2. 通过 .gallery-item 的 flex 和 calc() 控制每行图片数量并预留 margin 空间；3. 使用 margin 统一间距，box-sizing 精确布局；4. 配合媒体查询在不同设备调整列数，确保响应式效果。
使用 Flex 布局结合 margin 可以轻松实现一个整齐、响应式的图片画廊。关键在于利用 flex 的弹性特性控制容器，再通过 margin 自动分配间距，使图片排列更规整美观。
1. 设置容器为 Flex 布局
将图片的父容器设置为 display: flex，让子项（图片）在同一行内排列，并能自动适应空间。
为了实现换行，在容器上加上 flex-wrap: wrap，这样当一行放不下时，图片会自动折行显示。
示例代码：
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 图片之间的间隙，可选 */
}
2. 控制图片尺寸与对齐
每张图片可以设置固定宽度或相对宽度（如百分比），并统一高度或保持原始比例。
立即学习“前端免费学习笔记（深入）”；
使用 margin: auto 可以让单个图片项目在容器中居中对齐，但更常见的是通过整体布局控制对齐方式。
建议给每个图片外层包裹一个 div 容器，便于控制间距和对齐。
<div class="gallery"> <div class="gallery-item"><img src="image1.jpg" alt=""></div> <div class="gallery-item"><img src="image2.jpg" alt=""></div> <div class="gallery-item"><img src="image3.jpg" alt=""></div> </div>CSS 样式：
.gallery-item {
flex: 0 0 calc(33.33% - 20px); /* 每行最多3张图，减去左右margin */
margin: 10px;
}
<p>.gallery-item img {
width: 100%;
height: auto;
display: block;
}</p>3. 利用 margin 实现均匀间隔
通过给每个项目设置相等的 margin，再配合 calc() 计算宽度，可以让多列布局在不同屏幕下保持整齐。
注意：若使用了 gap 属性，则无需额外设置 margin 来控制间隙，但老版本浏览器支持较差，margin 更兼容。
如果不用 gap，可以用 margin 配合 box-sizing 精确控制布局：
.gallery-item {
margin: 10px;
flex: 0 0 calc(25% - 20px); /* 四列布局，减去 margin 占据的空间 */
box-sizing: border-box;
}
4. 响应式适配不同设备
通过媒体查询调整每行显示的图片数量，提升移动端体验。
/* 平板 */
@media (max-width: 768px) {
.gallery-item {
flex: 0 0 calc(50% - 20px); /* 每行两张 */
}
}
<p>/<em> 手机 </em>/
@media (max-width: 480px) {
.gallery-item {
flex: 0 0 calc(100% - 20px); /<em> 每行一张 </em>/
}
}</p>基本上就这些。Flex 布局加上 margin 控制，既能保证图片整齐排列，又能适应不同屏幕，适合初级项目快速实现美观的图片画廊。不复杂但容易忽略细节，比如 box-sizing 和 calc 的配合使用。
