Flexbox Examples

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>
    

The only thing that changes from example to example is the ID of the container, and the flexbox CSS. All of the examples *also* have the following CSS:

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

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.

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