title: How can I use flexbox to images to make elements appear side by side, vertically and horizontally?
body: <p>I am trying to get the images on my webpage to display side by side. There are four images, and I want them to be displayed two up, and two down. However, I am unable to get that to happen. I am using flexbox. I have used the flex directions, but it would not work.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>section {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  article {
    flex: 200;
  }
  
  .upgrades {
    flex: 100;
  }
  
  .reviews {
    align-self: flex-end;
  }
  
  figure {
    background-color: #3482D5;
    height: 80px;
    display: flex;
    flex: 1 auto;
    margin: 5px;
    line-height: 1.5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article class="upgrades"&gt;
    &lt;h3&gt;Delorean Upgrades&lt;/h3&gt;&lt;br&gt;
    &lt;br&gt;
    &lt;figure&gt;
      &lt;img src="https://placekitten.com/200/300" alt="bumper_sticker"&gt;
      &lt;figcaption&gt;Flux Capacitor&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
      &lt;img src="https://placekitten.com/201/301" alt="flame"&gt;
      &lt;figcaption&gt;Flame Decals&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
      &lt;img src="https://placekitten.com/202/302" alt="flux cap"&gt;
      &lt;figcaption&gt;Bumper Stickers&lt;/figcaption&gt;
    &lt;/figure&gt;
    &lt;figure&gt;
      &lt;img src="https://placekitten.com/203/303" alt="hub cap"&gt;
      &lt;figcaption&gt;Hub Caps&lt;/figcaption&gt;
    &lt;/figure&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>