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">
        ...