align-items [column]

align-items [column]

Now let's take a look at how our flex items are aligned if the cross axis is sitting horizontally. In other words, flex-direction is column.

.parent {
  flex-direction: column;

  align-items: stretch /* default */
            or flex-start
            or flex-end
            or center
            or baseline
}

align & justify

One of the cited issues with people remembering the alignment properties in Grid and Flexbox, is that no one can remember whether to align or to justify. Which direction is which?

For Grid Layout, you need to know if you are aligning in the Block or Inline Direction.

👉 The Block direction is the direction blocks lay out on your page (in your writing mode), i.e. for English that is vertically. The Inline direction is the direction in which sentences run (so for English that is left to right horizontally).

🛑 To align things in the Block Direction, you will use the properties which start with align-.

use align-content to distribute space between grid tracks, if there is free space in the grid container, and align-items or align-self to move an item around inside the grid area it has been placed in.

🛑 To align things in the inline direction, use the properties which begin with justify-.

Use justify-content to distribute space between grid tracks, and justify-items or justify-self to align items inside their grid area in the inline direction.