Box Alignment Cheatsheet

The box alignment specification details how items are aligned in the various layout methods. As different layout methods pose different constraints in terms of alignment, some of the behaviour of Box Alignment is layout method dependent. This cheatsheet compares alignment in CSS Grid Layout and Flexbox.

Key concepts of the Box Alignment specification

When you align an item, you do so within an alignment container. This is the rectangle you are aligning the item or items inside, usually the containing block. The item you are aligning inside that block is the alignment subject.

The specification defines three types of alignment:

Positional alignment - keywords such as start, end, center
Baseline alignment - baseline, last baseline, first baseline
Distributed alignment - includes space-between and space-around

Most of these keyword values work in reference to the writing mode of the document. Therefore start may be the left-hand line of a grid container when working in English, but the right-hand line when working in a right-to-left language.

Block and Inline Axis

You will find the Block and Inline Axis referred to in various ways. The Block Axis, is referred to as the Column Axis in the Grid specification and in Flexbox as the Cross Axis as it runs across the Main Axis.

The Inline Axis is referred to as the Row Axis in the Grid specification and in Flexbox as the Main Axis.

Alignment on these Axes is easier to understand in Grid as we always have strict rows and columns, in flexbox we also have to consider the ability to change the direction of the main axis from row to column.

align-self / align-items

Align an item / a group of items on the Block Axis

Grid

alignment container: the grid area
default behaviour: Acts as if the value is stretch, other than for items with an intrinsic aspect ratio, these behave as start.
possible values: auto, normal, start, end, center, stretch, baseline, first baseline, last baseline
works on: block axis / column axis

Example

The default for align-self acts like stretch. Setting align-items to start on the grid container will cause all items to align to the start on the Block axis.

Initial value

align-items: start

Flexbox

alignment container: the flex line the item is in
default behavior: Acts as stretch
possible values: auto, normal, flex-start, flex-end, center, stretch, baseline, first baseline, last baseline
works on: cross axis / block axis

Example

The default for align-self is stretch. Causing the items to stretch to the height of the flex container if flex-direction: row, and to the width if flex-direction: column.

direction: row

Direction: column

flex-start

justify-self / justify-items

Justify an item / a group of items on the Inline Axis

Grid

alignment container: the grid area
default behavior: Acts as if the value is stretch, other than for items with an intrinsic aspect ratio, these behave as start.
possible values: auto, normal, start, end, center, stretch, baseline, first baseline, last baseline
works on: inline axis / row axis

Example

The default for justify-self acts like stretch. Setting justify-items: start on the grid container will cause all items to align to the start on the Inline axis.

Initial value

justify-items: start

Flex

The justify-self property does not apply in flexbox as we are working in one dimension only, and there may be multiple items on the main axis making it impossible to align just one. To align the content along the main axis, see the justify-content property below.

If you wish to change alignment of a single item on the inline axis, a good method is to add an auto margin to the item.

align-content

Control alignment of items within their content box on the Block Axis

Grid

alignment container: the grid container
default behavior: Acts as if the value is stretch, other than for items with an intrinsic aspect ratio, these behave as start.
possible values: normal, start, end, center, stretch, space-around, space-between, space-evenly, baseline, first-baseline, last-baseline
works on: block axis / column axis
requires: additional space in the grid container

Example

If the track sizing creates fixed size tracks smaller than the container these will align to the start. The value space-between will space them out, making the gap wider.

Initial value

space-between

Flex

alignment container: the flex container
default behavior: stretch
possible values: normal, flex-start, flex-end, center, stretch, space-around, space-between, space-evenly, baseline, first-baseline, last-baseline
works on: cross axis / block axis
requires: the container has more space than is required to display the items, the items are set to flex-wrap: wrap.

Example

You can use align-content in a flex container if the container has more space on the cross axis than is needed to display the items.

row default

space-between

column default

space-between

justify-content

Control alignment of items within their content box on the Inline Axis

Grid

alignment container: the grid container
default behavior: Acts as if the value is stretch, other than for items with an intrinsic aspect ratio, these behave as start.
possible values: normal, start, end, center, stretch, space-around, space-between, space-evenly, baseline, first-baseline, last-baseline
works on: inline axis / row axis
requires: additional space in the grid container

Example

If the track sizing creates fixed size tracks smaller than the container these will align to the start. The value space-between will space them out, making the gap wider.

Initial value

space-between

Flex

alignment container: the flex container
default behavior: behaves as stretch however because the flex properties control stretching on the main/inline axis this defaults to flex-start
possible values: normal, flex-start, flex-end, center, stretch, space-around, space-between, space-evenly, baseline, first-baseline, last-baseline
works on: main axis / inline axis
requires: the container has more space than is required to display the items.