CSS Flexbox

Original source: https://www.internetingishard.com/html-and-css/flexbox/

Flex container groups flex items. Every HTML element that’s a direct child of a flex container is an “item”.

To create flex container, add display: flex.

On container:

• justify-content: define primary axis (default horizontal) alignment of flex items

  

• justify-content: distributing items

  

• align-items: define secondary axis (default vertical) alignment of flex items

  

• flex-wrap: wrapping flex items

• flex-direction: whether primary axis is vertical or horizontal

• flex-direction: order of items

On items:

• order: order of item in its container
• align-self: override container align-items
• flex: how fast to grow compared to other items. initial means fixed to its width