Flexbox Examples

I've kept the HTML for this page relatively simple, so you can do a "view source" if you want.

All of the following examples are based on the following HTML:

    <div id="container1" class="container">
      <div class="item">Barry</div>
      <div class="item">Robin</div>
      <div class="item">Maurice</div>
      <div class="item">Leslie</div>
    </div>
    

Note that the outer div has both an ID and a class. The class allows all the outer divs to have some consistent CSS, namely border, padding and margin. The inner divs also have a class, which applies margins, border and padding to each. Here's the consistent CSS:

      .container {
          border: 2px solid green;
          padding: 2px;
          margin: 10px;
      }
      .item {
          margin: 2px;
          border: 2px solid brown;
          padding: 1em;
      }
      

The only thing that will change from example to example is the ID of the container, and the flexbox CSS.

You are also encouraged to "view source" on this page or inspect the elements of each example to see the rules and CSS properties that are applied.

Example: Items can Grow

In this first example, the items are arranged in a row. They have a set width, but they are allowed to grow if the container has extra space. I used a pixel width rather than percentages, so we can see what happens to leftover space.

The number in each inner box is its actual width in pixels.

Note the use of a descendant selector for the flex items.

Example: Items cannot Grow

Here, we set flex-grow: 0 (via the flex shorthand) and so the items stay at their specified widths, even if there is extra space.

Example: First item can Grow

Here, we set flex-grow: 0 on all of them, but override that to allow the first to grow (using the :first-child pseudo-class). So Barry gets all the extra space, if any.

Example: space-between

Here, we set a policy that any extra space is put between items, rather than at the end.

Example: center

Here, we set a policy that any extra space is split between before and after the items, centering them.

Example: space-around

Here, we set a policy that any extra space is evenly divided between and around the items