| Interactive Media Design

Flexbox Layout

The CSS Flexible Box Modelopen in new window, often referred to as Flexbox, is a way for a container to tells its children how best to fill the available space by altering width, height and order. Flexbox is a one-dimensional layout model, meaning it only handles distribution in one direction at a time, horizontal or vertical. This in contrast to the CSS Grid Layout which is a two dimensional model and able to control both the horizontal and the vertical at the same time.

Flexible Box Container

When using Flexbox most of the settings are controlled by the parent element or the flexible box container. To create a flexible box container, apply the flex value to the display property of the desire parent element.

When display: flex is applied to a parent element, the child elements will no longer display as block elements, and the parent element will now be able to dictate how the children are distributed and aligned.

Flex Direction

When working with Flexbox you must be aware two axes, a main axis and cross axis, and how Flexbox distributes and aligns items along this axes.

The flex-direction property is used to define which direction of the main axis. The flex-direction will take 4 valid values:

  • row (default) or row-reverse: the main axis will run horizontally or the inline direction
  • column or column-reverse: the main axis will run vertically or in block direction

flex-direction: row

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

Flex Wrap

By default, children of a flex box container will remain on a single line.

The flex-wrap property is used to allow children to wrap.

Justify Content

A flexbox container uses the justify-content property can set how the children are distributed in the available space across the main axis. The justify-content property will accept the following values:

  • flex-start (default): Items are packed on the start of the main axis
  • flex-end: Items are packed on the end of the main axis
  • center: Item are centered along the main axis
  • space-around: Items are evenly distributed in the line with equal space around them
  • space-between: Items are evenly distributed in the line; first item is on the start line, last item on the end line
  • space-evenly: Items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-around

justify-content: space-between

justify-content: space-evenly

Align Items

The align-items property defines the default behavior for how children are laid along the cross axis. The align-items will accept the following properties:

  • stretch (default): items are stretched to fill the container
  • flex-start: items are placed at the beginning of the cross axis.
  • flex-end: items are placed at the end of the cross axis
  • center: items are placed at the center of the cross axis
  • baseline: items are placed so their baselines align

NOTE

For the following examples, boxes B and D were given additional padding top to better show the differences between the different align-items values.

align-items: stretch

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

Additional Resources

Below are additional resources for learning Flexbox Layout.

This YouTube video was created by Steve Griffith.