title: Building a product page with product-info below the image. Flex or not?
body: <p>I'm practicing html and css by trying to build a product page. Even though I am following an example, I am confused by the flex example.</p>
  <p>Example: <a href="https://css-tricks.com/designing-a-product-page-layout-with-flexbox/" rel="nofollow noreferrer">https://css-tricks.com/designing-a-product-page-layout-with-flexbox/</a></p>
  <p>My code: <a href="https://jsfiddle.net/rhtb8q3k/" rel="nofollow noreferrer">https://jsfiddle.net/rhtb8q3k/</a></p>
  <p>I want the product info to be below the product image, exactly how they have it in the jackets image. <code>product-card</code> is a container that has both the image and the product info. They have:</p>
  <pre><code>.product-card {
    padding: 2%;
    flex-grow: 1;
    flex-basis: 16%;
    display: flex;
  }
  </code></pre>
  <p>But when I have <code>display: flex;</code>, the product info is beside the picture. If I remove it, the text shows below the image. What's the difference between my code and the example? I don't see <code>text-align</code> or <code>flex-direction</code> either.</p>