rachelandrew.co.uk ./css

The layout for this cheat sheet uses CSS Grid Layout. It looks like your browser doesn't support it yet. Find out about support for CSS Grid Layout.

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:

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

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.

Example

space-between

space-between