Alignment

Alignment :

Align main axis -> justify-content :

  • flex-start (align with beginning)
  • flex-end
  • center
  • space-between (elements are stretch on axis)
  • space-around (same that space-between but with space on edges)
  • stretch (by default)

flexbox-justify_content.png

Align horizontally & vertically :

.wrapper
{
    display: flex;
}

.element
{
    margin: auto;
}

Align cross axis -> align-items :

  • stretch
  • flex-start
  • flex-end
  • center
  • baseline

Align lines -> align-content

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch (by default)

flexbox-align_content.png