Skip to main content

Flex Alignment

Utilities to align flex items via align-items and flex rows via align-content.

Align items​

The following enums are provided for align-items:

  • baseline
  • center
  • end (short for flex-end value)
  • start (short for flex-start value)
  • stretch

align-items--baseline​

align-items--center​

align-items--end​

align-items--stretch​

align-items--start​

Align content​

The following enums are provided for align-content:

  • around (short for space-around value)
  • between (short for space-between value)
  • center
  • end (short for flex-end value)
  • start (short for flex-start value)
info

The align-content property only affects flex containers with wrapped flex items.

align-content--around​

align-content--between​

align-content--end​

align-content--center​

align-content--start​

Utility classes can also be used to determine the alignment for a specific flex child​

align-self--baseline​

Flex item (justified)
Flex item
Flex item

align-self--end​

Flex item (justified)
Flex item
Flex item

align-self--start​

Flex item (justified)
Flex item
Flex item

align-self--center​

Flex item (justified)
Flex item
Flex item

align-self--stretch​

Flex item (justified)
Flex item
Flex item