使用css flex布局可创建响应式图片画廊，通过display: flex和flex-wrap: wrap实现多行自动换行；结合flex: 0 0 20%控制每行5列，margin设置间距，box-sizing确保计算准确；利用媒体查询适配移动端，align-items和justify-content优化对齐，object-fit统一图片高度，提升视觉一致性。
在构建图片画廊时，CSS Flex布局提供了一种灵活且响应式的方式来排列图像。通过多行多列的弹性分布，可以实现自适应屏幕尺寸、等间距对齐、自动换行等效果，而无需依赖复杂的浮动或定位。
启用Flex容器并设置多行排列
要让图片在容器中实现多行分布，首先需要将父容器设为flex，并允许换行：
- 使用 display: flex; 启用弹性布局
- 添加 flex-wrap: wrap; 允许子元素换行
- 设定容器宽度，例如100%，以适配不同设备
这样，当图片数量超过一行容纳能力时，会自动折到下一行，保持整齐排列。
控制每行图片列数与间距
为了实现多列均匀分布，可通过设置每个图片项的宽度和外边距来控制布局：
立即学习“前端免费学习笔记（深入）”；
- 给每个图片容器设置固定或百分比宽度，如 flex: 0 0 20%; 实现每行5列
- 使用 margin 添加项间空白，避免拥挤
- 结合 box-sizing: border-box; 确保间距计算准确
配合媒体查询，可在小屏幕上调整为 flex: 0 0 33.3%（每行3张）或 50%（每行2张），提升移动端体验。
对齐与视觉一致性优化
Flex布局提供了强大的对齐能力，使画廊看起来更专业：
- 使用 align-items: center; 垂直居中图片
- 设置 justify-content: space-between; 或 space-around; 分配水平间距
- 为图片统一设置 height 和 object-fit: cover; 防止因尺寸不同导致高度错乱
这些样式能有效避免“参差不齐”的问题，尤其在图片原始比例不一致时尤为重要。
基本上就这些。利用Flex的包裹和伸缩特性，图片画廊可以轻松实现美观、响应式的多行多列布局，兼容性好且代码简洁。不复杂但容易忽略细节，比如外边距叠加或最小宽度设置，稍加调试就能达到理想效果。
