如何使Flexbox容器呈现设计预期的布局效果？

我正尝试复刻设计稿，但Flexbox容器的表现不符合预期。

HTML代码 #

<section class="gallery">
    <div class="container">
        <h1>GALLERY</h1>
        <div class="gallery-container">
            <img src="Images/gallery1.png" alt="">
            <img src="Images/gallery2.png" alt="">
            <img src="Images/gallery3.png" alt="">
            <img src="Images/gallery4.png" alt="">
            <img src="Images/gallery5.png" alt="">
            <img src="Images/gallery6.png" alt="">
        </div>
        <img class="downarrow" src="Images/downarrow.png" alt="">
    </div>
</section>

CSS代码 #

.gallery .container .gallery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 10px;
}

设计参考与当前效果 #

解决方案 #

原代码使用justify-content: space-around会导致每行元素间距不均，尤其是最后一行，无法匹配设计稿的3列规整布局。调整CSS如下：

.gallery .container .gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* 可根据设计稿调整间距大小 */
}

.gallery-container img {
  flex: 0 0 calc(33.333% - 10px); /* 计算3列宽度，减去gap的均分部分 */
  object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}

说明：通过给图片设置固定的flex-basis，结合calc计算出准确的宽度，确保每行严格显示3张图片，同时gap保证元素间间距均匀，完全贴合设计稿的布局要求。

内容的提问来源于stack exchange，提问作者Abdessalam Semlali