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