Layout - Flexbox

Please note! The next few pages are a lot to take in! Don't worry too much if you don't grasp it straight away. Flexbox and Grid are quite advanced CSS. It's not required that you use it in all your projects, so have a read, have a practice, and have a look at some of the resources at the end when you're ready. You've got this!

After learning about positioning, it only makes sense that we have a look at 2 of the most used CSS tools to create layouts and ensure that they react to different screen sizes (aka viewports) - Flexbox & Grid.

Flexbox

Flexbox is an efficient way of lay out, align and distribute space among items in a container, specially when the size of those elements is unknown or dynamic. In other words, it should pop up in your mind if you're trying to create a layout without knowing exactly how many elements the layout will have.

When we looked at positioning, all it took was a single property that sets the value for a targeted element. Flexbox is a whole module, which means that we should consider a whole set of properties, some applied to the flex container (parent element) and others to the flex items (children).

If we had the following html:

<div class="parent">
  <div class="child">A</div>
  <div class="child">B</div>
  <div class="child">C</div>
  <div class="child">D</div>
</div>

To set the parent element as a flex container:

.parent {
  display: flex; /* The div .parent is now a flex container. */
}
 
.child {
  /* All of these items are now flex items. */
}

The parent and its children will have a set of properties each. Let's look at the parent's ones first.

Flex Container

Look at the image below:

The first thing to look at is the main axis, which is is the primary axis along which flex items are laid out. By default, it is set horizontally, but that can be changed with the property flex-direction, which can be set to column (vertically) or remain as row (horizontally).

We can also reverse the order of the children (from D to A, in this example) by setting the direction of the parent to row-reverse or column-reverse.

By default, flex items will be compacted in a single line. This behaviour can also be changed by setting a property called flex-wrap to wrap.

You can even combine both properties (direction and wrap) into a single one called flex-flow:

.parent {
  flex-flow: column wrap;
}

Most of the times, you'll use flexbox to center or space-out your flex items. It's one of many ways of achieving organised layouts between structures.

You'll be able to achieve this with most likely 2 properties: justify-content and align-items. But in order to use them properly, you need to consider the flex-direction you're currently working on.

If your flex-direction is set to row:

• justify-content will align your items horizontally (main axis).
• align-items will align your items vertically (cross axis).

If your flex-direction is set to column:

• justify-content will align your items vertically (cross axis).
• align-items will align your items horizontally (main axis).

justify-content can have as value:

• flex-start, flex-end, center, space-evenly, space-between, space-around

align-items can have as value:

• stretch, flex-start/start/self-start, flex-end/end/self-end, center, baseline

You can also align the elements as a whole, instead of each one individually. To do this, you'll use the align-content property, which can take as a value:

• normal, flex-start/start, flex-end/end, center, space-between, space-around, space-evenly, stretch

Flex Items

The flex items can also be tweaked. You can, for example, change the order without touching the html itself:

.child {
  order: 2;
}

You can also ensure that the items are displayed with different sizes. By default, the container will lay all of its children equally in the space it occupies, but you can change that behaviour with flex-grow. All of the items have it set to 1. If you change it to 2, the child would take up twice as much space as its siblings.

.child {
  flex-grow: 2;
}

If necessary, you can set the item to shrink:

.child {
  flex-shrink: 2;
}

Practice

Flexbox Froggy

This game comprises 24 levels where you'll always be presented a CSS editor, and a layout display with a frog and a pond. The idea is that you write the correct flexbox property to move the frog to the pond.

Extra Resources

When you're ready to get to grips with Flexbox try these resources -

1. Every front end developer has this cheatsheet from CSS Tricks bookmarked on their browser. Remember, you aren't expected to remember all this off by heart.
2. This course of simple video tutorials from WesBos is super helpful for walking through some examples and getting a feel for flexbox. Be sure to check out WesBos's other materials too!