html - 设置 flexbox 图像之间距离的更好方法

Question

虽然我已经使用 bootstrap 轻松解决了这个问题，但我希望习惯 flex-box 模型和 html 5。 我有 3 张图片显示在一行中(没有换行)，图片之间有空格。 下面是我的 html:

<article>
  <figure>
    <picture>
      <img src="images_srcset/desert-dolphin-medium.jpg"  alt="Dolphin art">
    </picture>
    <figcaption>DESERT-BOTTLE-DOLPHIN</figcaption>      
  </figure>     

  <figure>
    <picture>
      <img src="images_srcset/abc-dolphin-medium.jpg" alt="a-b-c-dolphin">      
    </picture>
    <figcaption>A-B-C-DOLPHIN</figcaption>      
    </figure>       

    <figure>
      <picture>
        <img src="images_srcset/delfin-bananas-medium.jpg" alt="Banana art">
      </picture>
      <figcaption>BANANA-DELPHIN</figcaption>         
    </figure>
</article>

我已经使用了在“设置 flexbox 元素之间距离的更好方法”这个问题下阅读的所有方法。以上均无效。我最后尝试的 css 是:

article {
  width: 100vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

article > figure {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 32vw;
  margin-right: 1.333vw;
}

请问我做错了什么？

Answer 1

删除这个:margin-right: 1.333vw; 。这足以在数字之间设置良好的等边距:

article{ justify-content: space-between;}

这设置了边距。如果你需要在第一个数字之前和数字结束之后有一个小的边距，你可以设置这个:

article{ justify-content: space-around;}