Understanding flex-grow, flex-basis, flex-shrink, and flex

Let's take a crack at understanding flexbox's sizing properties. In this section, we'll look at sizing flex items with flex-grow, flex-shrink, flex-basis, and the shorthand for them all; flex. All of these properties apply to flex items, not to flex containers.

Using flex-grow

First, we'll look at a new page—flexbox.html. As you might have guessed, there's a <section> that will be the flex container, and 5 <div>'s which will be the flex items. :

<!--
====================
Flexbox Demo
====================
-->
<section class='flex-container'>
    <div class="flex-item flex-item1">item 1</div>
    <div class="flex-item flex-item2">item 2</div>
    <div class="flex-item flex-item3">item 3</div>
    <div class="flex-item flex-item4">item 4</div>
    <div class="flex-item flex-item5">item 5</div>
</section>

Here's the CSS we'll start with before adding...