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.