Better way to set distance between flexbox images

Question

Though I have solved this easily using bootstrap, I wish to get used to the flex-box model and html 5. I have 3 images to display in just one row (no wrapping) with space in between the images. Below is my 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>

I have used all the methods I read under the question "Better way to set distance between flexbox items". None worked for the above. My last tried css is:

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;
}

Please what am I doing wrong?

Answer 1

remove this: margin-right: 1.333vw; . It is enough for setting good equal margins between figures:

article{ justify-content: space-between;}

This sets the margins. And if you need a small margin before first and after the end of figures you can set this:

article{ justify-content: space-around;}

Answer 2

Thanks for your suggestion. There is a point missing also from you. I searched Udacity FEND course forum and here is what I got that eventually works ref: https://discussions.udacity.com/t/must-read-for-using-flexbox/198498 (now I do not know if this is opened to the public). The title is "Must read for using flexbox". Essentially it says: Flexbox works with DIRECT child components ONLY. grandchild and all other descendant components will ignore unless each is defined as a display: flex Hence my new codes are: HTML:

<article class="article">       
        <figure class="article-figure">
            <picture class="article-picture">
                <img src="images_srcset/desert-dolphin-large.jpg" alt="Bottled dolphin in the desert">      
            </picture>
            <figcaption class="figcaption">BOTTLE-DOLPHIN</figcaption>
        </figure>       

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

        <figure class="article-figure">
            <picture class="article-picture">
                <img src="images_srcset/delfin-bananas-large.jpg" alt="Dolphin shaped Bananas in glass-cup">
            </picture>
            <figcaption class="figcaption">BANANA-DELPHIN</figcaption>              
        </figure>           
    </article>

CSS:

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

.article-figure {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 30vw;
}

.article-picture {
  display: flex;
  width: 30vw;
  height: 50vh; 
}

Note that display: flex; appears in the parent and all descendants