Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
}

.child {
  flex: 1; // fill remaining space
}

flex-direction: row (default) or column; justify-content: how it aligns along the flex-direction; Think of how text is justified along the direction it flows

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

align-items: how it aligns perpendicular to the flex-direction

  • stretch (default)
  • flex-start
  • flex-end
  • center
  • baseline