Lesson Weekend

The video from the last lesson outlined what flexboxes look like, how to create them, and properties to customize how they organize their contents.

Before we create our own flexboxes, let's walk through the properties used to configure and customize them. In addition to solidifying flexbox basics, this lesson will also act as a reference material as you use flexbox in future projects.

Flexbox Anatomy and Terminology

To review, the parent flexbox container with the ability to dynamically resize and reorder items is called a flex container. The children whose layout the container manages are called flex items.

Flexbox containers can organize children horizontally or vertically. This orientation is its main axis. If items are organized into columns the main axis is vertical. If they're ordered in rows the main axis is horizontal.

The cross axis is always perpendicular to the main axis. It helps determine things like centering. So, for example, if the main axis is horizontal because flexbox items are organized into rows, the cross axis would be vertical, as seen in the Flexbox Cheatsheet by Joni Trythall:

Flex Containers

To turn a container into a flexbox we simply set its display property to flex:

.parent {
  display: flex;
}

This creates a block-level flex container. We could also create an inline flexbox like this:

.parent {
  display: inline-flex;
}

Although the latter is less commonly used.

Flex Container Properties

After creating a flexbox we can add any of the following properties to the parent flex container to customize how it organizes the flex items within it:

flex-direction

flex-direction denotes whether flex items are organized in rows or columns, and which order they appear in. This is also what determines whether the main axis is horizontal or vertical. It supports four options:

  • column: Creates a vertical column, and a vertical main axis.
.parent {
    display: flex;
    flex-direction: column;
}

  • column-reverse: Creates a vertical column with items in reverse order.
.parent {
    display: flex;
    flex-direction: column-reverse;

  • row: Creates a horizontal row and therefore a horizontal main axis.
.parent {
    display: flex;
    flex-direction: row;
}

  • row-reverse: Creates a horizontal row in reverse order.
.parent {
    display: flex;
    flex-direction: row-reverse;
}

If a flexbox's flex-direction is not specified it will always default to row.

flex-wrap

flex-wrap tells the parent flex container whether its flex item children wrap to new lines. It supports three options:

  • wrap: Wraps flex items into multiple lines (either rows or columns, depending on flex-direction) when/if they do not fit on one.
.parent {
    display: flex;
    flex-wrap: wrap;
}

  • nowrap: Shrinks flex items to fit onto one line to avoid wrapping to multiple lines.
.parent {
    display: flex;
    flex-wrap: nowrap;
}

  • wrap-reverse: Wraps flex items into multiple lines in reverse order.
.parent {
    display: flex;
    flex-wrap: wrap-reverse;
}

If no flex-wrap is specified, the flexbox will always default to nowrap.

justify-content

justify-content controls the alignment of flex items on the main axis. It supports five values:

  • flex-start: items are aligned to the beginning of the main axis (the left-hand side if flex items are organized in rows, or the top if organized in columns.)
.parent {
    display: flex;
    justify-content: flex-start;
}

  • flex-end: items are aligned to the end of the main axis (right edge if using rows, or bottom if using columns.)
.parent {
    display: flex;
    justify-content: flex-end;
}

  • center: items are aligned at the center of the main axis.
.parent {
    display: flex;
    justify-content: center;
}

  • space-around: items are displayed with equal spacing both between themselves and edges of the container.
.parent {
    display: flex;
    justify-content: space-around;
}

  • space-between: first and last items touch edges of the flexbox, with equal spacing between items.
.parent {
    display: flex;
    justify-content: space-between;
}

If justify-content is not specified it will default to flex-start.

align-items

This is similar to justify-content. While justify-content controls flex items' position on the main-axis, align-items controls position on the cross-axis.

So if items are organized into rows, align-items controls vertical alignment. If they're in columns, align-items would instead determine their horizontal alignment.

Note: Images in the section below assume one of the flex items is larger than its siblings. This is to observe how these rules work when flex item children are multiple sizes. Know that align-item does not inherently resize items like this.

align-items supports five values:

  • flex-start: aligns items to the beginning of the cross-axis (top-edge, if items are in rows, or left side if columns).
.parent {
    display: flex;
    align-items: flex-start;
}

  • flex-end: aligns items to the end of the cross-axis (bottom edge if rows, right-side if columns).
.parent {
    display: flex;
    align-items: flex-end;
}

  • center: items are centered on the cross-axis.
.parent {
    display: flex;
    align-items: center;
}

  • stretch: flex items stretch to fill all available space on the cross-axis.
.parent {
    display: flex;
    align-items: stretch;
}

  • baseline: aligns items' baselines. Notice in the image below that the bottom of the big "3" lines up with the bottom of all other numbers, despite the flex childrens' differences in size.
.parent {
    display: flex;
    align-items: baseline;
}

You can read more about how baselines in this article from w3.

If not specified, align-items will default to stretch.

align-content

align-content aligns flex items together on the cross-axis when/if space remains. This differs from align-items because it only takes effect when there are multiple rows or columns.

(For a more detailed explanation of the differences, including visual examples, we recommend taking a peek at the article What the Flex is the Difference Between justify-content, align-items and align-content?! by Wendy Yang.)

align-content supports the same six values used by align-items and justify-content:

  • flex-start: items are aligned to the beginning of the cross-axis.
.parent {
    display: flex;
    align-content: flex-start;
}

  • flex-end: items are aligned to the end of the cross-axis.
.parent {
    display: flex;
    align-content: flex-end;
}

  • center: items are aligned at the center of the cross-axis.
.parent {
    display: flex;
    align-content: center;
}

  • space-between: first and last items touch the constraints of the flexbox parent, with equal spacing between each other row or column.
.parent {
    display: flex;
    align-content: space-between;
}

  • space-around: items are displayed with equal spacing around every row (or column), and between the first and last item and constraints of the flex container.
.parent {
    display: flex;
    align-content: space-around;
}

  • stretch: all child items stretch to fill all available space.
.parent {
    display: flex;
    align-content: stretch;
}

If not specified, default align-content value is stretch.

Conclusion

This may sound like a lot, but don't worry! You don't have to memorize any of this, and can simply refer back to this lesson at any time!

The next lesson will explore properties and values we can add to specific flex items to customize their placement further. Then we'll explore shortcuts to make flexbox CSS even DRY-er before finally flexing our new skills in class.

Lesson 7 of 36
Last updated more than 3 months ago.