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.
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.
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.
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 an item / a group of items on the Block Axis
stretch
, other than for items with an intrinsic aspect ratio, these behave as start
.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.
stretch
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
.
Justify an item / a group of items on the Inline Axis
stretch
, other than for items with an intrinsic aspect ratio, these behave as start
.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.
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.
Control alignment of items within their content box on the Block Axis
stretch
, other than for items with an intrinsic aspect ratio, these behave as start
.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.
flex-wrap: wrap
.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.
Control alignment of items within their content box on the Inline Axis
stretch
, other than for items with an intrinsic aspect ratio, these behave as start
.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.
stretch
however because the flex properties control stretching on the main/inline axis this defaults to flex-start