Flexbox

Introduction

Flexbox is used to make one-dimensional (one direction) layouts allowing us to place items in rows or columns. It is called Flexbox because items adjust to either fill empty space or shrink to fit into smaller spaces. This makes Flexbox ideal for building responsive websites.

It is worth noting that Flexbox offers a lot of functionality to developers to create complex layouts, but it is also great for simple layouts as well.

Using Flexbox

display: flex

To start using Flexbox you need to set a container (Parent HTML element) to display: flex. This enables a flex context for all of its direct children. The child items will default to being displayed in a row flex-direction: row, and will divide the available space in the container amongst the child items. If the child items are too small to take up the whole container they will stack up from the left margin.

<section class="container">
  <div class="item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
  <div class="item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
  <div class="item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
</section>
.container {
  display: flex;
}

.item {
  margin: 5px;
}

| Row 1: This is a flex item

| Row 2: This is a flex item

| Row 3: This is a flex item

flex

To set how much space the flex items take up, you can set flex followed by a number. All of the flex numbers are added together and then each item is divided by the total.

In the example below, the items are set to have flex: 1, but the class of ‘wider-item’ is set to flex: 4. That means the container has a total of 6 (4+1+1). The ‘.wider-item’ gets the space of 4/6 and the other two items get the space of 1/6 each.

_ Note: flex: 1 is the shorthadn for flex: 1 1 auto. _

<section class="container">
  <div class="item wider-item">
    <p>
      <i>Flex 4 item</i> Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Nulla nec neque pharetra, porta ipsum sed, porta turpis. Proin
      tristique quam nunc, sed rutrum nulla varius vitae. Nulla non leo sapien.
      Pellentesque viverra felis eu nunc ullamcorper imperdiet. Nulla a mattis
      elit. Pellentesque vitae tortor nulla.
    </p>
  </div>
  <div class="item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
  <div class="item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
</section>
.container {
  display: flex;
}

.item {
  margin: 5px;
  flex: 1;
}

.wider-item {
  flex: 4;
}

flex-direction

By default, the flex-direction is set to row and so the flexed items will display in a row. For mobile devices it is useful that we can switch this direction to column (flex-direction: column) so that the items now display in a vertical column.

You can also set the direction to row-reverse or column-reverse and the items will display in the opposite order to how they have been written.

<section class="container">
  <div class="item wider-item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
  <div class="item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
  <div class="item">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec neque
      pharetra, porta ipsum sed, porta turpis. Proin tristique quam nunc, sed
      rutrum nulla varius vitae. Nulla non leo sapien. Pellentesque viverra
      felis eu nunc ullamcorper imperdiet. Nulla a mattis elit. Pellentesque
      vitae tortor nulla.
    </p>
  </div>
</section>
.container {
  display: flex;
  flex-direction: column;
}

.item {
  margin: 5px;
  flex: 1;
}

Classroom Exercise (5 minutes)

In the index page, make the first item in the flex container take up 2/3 of the space and the other two items take up 1/3 of the space, using flex. The three sections should be vertical columns instead of rows.

flex-wrap

By default, the items will all fit on one line to take up the available space of the container. But sometimes, the items can get quite squashed. In this case, set flex-wrap: items will wrap onto another line if there isn’t available space.

order

If you would like to restructure the order in which items appear in their container, you can set the order number in which they should appear. The lowest number shows first. This can be especially useful when working with media queries and different layouts for different device screen sizes.

justify-content

The justify-content property sets the alignment and spacing of the flexed items along the main axis.

<main>
  <section>One</section>
  <section>Two</section>
  <section>Three</section>
</main>
main {
  display: flex;
  justify-content: space-around;
}

section {
  padding: 20px;
  background-color: lightblue;
}

Example

One
Two
Three

In the above example, we use justify-content: space-around to distribute the child items evenly and leave a half size space on either side.

Here are other possible values for the justify-content property.

  • center places items in the center of the parent.
  • start and end place items either at the start of the parent, or the end.
  • space-between places the first item at the start and last item at the end. Items in between are then spaced evenly.
  • space-evenly places all items evenly with even space between them.

Activities

Activity 1

WATCH

This tutorial video on Flexbox. (4m 12s)

Activity 2

READ

A Complete Guide to Flexbox by CSS Tricks

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.