title: Better way to set distance between flexbox images
body: <p>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:</p>
  
  <pre><code>&lt;article&gt;
    &lt;figure&gt;
      &lt;picture&gt;
        &lt;img src="images_srcset/desert-dolphin-medium.jpg"  alt="Dolphin art"&gt;
      &lt;/picture&gt;
      &lt;figcaption&gt;DESERT-BOTTLE-DOLPHIN&lt;/figcaption&gt;      
    &lt;/figure&gt;     
  
    &lt;figure&gt;
      &lt;picture&gt;
        &lt;img src="images_srcset/abc-dolphin-medium.jpg" alt="a-b-c-dolphin"&gt;      
      &lt;/picture&gt;
      &lt;figcaption&gt;A-B-C-DOLPHIN&lt;/figcaption&gt;      
      &lt;/figure&gt;       
  
      &lt;figure&gt;
        &lt;picture&gt;
          &lt;img src="images_srcset/delfin-bananas-medium.jpg" alt="Banana art"&gt;
        &lt;/picture&gt;
        &lt;figcaption&gt;BANANA-DELPHIN&lt;/figcaption&gt;         
      &lt;/figure&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>article {
    width: 100vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  article &gt; figure {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 32vw;
    margin-right: 1.333vw;
  }
  </code></pre>
  
  <p>Please what am I doing wrong?</p>