Building the product listing

Let's build a product listing with flexbox. We're going to see what else we can build with flexbox by creating a product listing. We'll explore two new flexbox properties: align-items and align-self.

Using align-items

To build the product listing, we're going to start with some new markup that will sit directly above the footer:

<!-- 
===============
Product Listing
===============
-->
<section class="secondary-section grouping">
    <ul class="wrapper product-list">
        <li class="product-list-item">
            <figure>
                <img src="images/octopus-icon.svg" alt="Octopus">
            </figure>
            <h2>The Octopus</h2>
            <p>Lorem ipsum dolor sit.</p>
            <a href="#" class="button">Tenticals &raquo;</a>
        </li>
        <li class="product-list-item">...</li>
        <li class="product-list-item">...</li>...