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