align-content specify how browsers should position a flexible container's lines along the flexbox's cross-axis.
align-items specify how browsers should position a flexible container's items along the cross-axis of a flexbox.
align-self specifies how browsers should position selected flexible items along the flexbox's cross-axis.
flex is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.
flex-basis sets the initial length of a flexible item.
flex-direction tells browsers the specific direction they should lay out a flexible container's direct children.
flex-flow is a shorthand for the flex-direction and flex-wrap properties.
flex-grow tells browsers how much of the flexbox's left-over space they should add to the selected flexible item's size.
flex-shrink tells browsers how much the specified flexible item should shrink when the sum of all items' sizes exceeds the flexbox's size.
flex-wrap specifies whether browsers should wrap overflown flexible items onto multiple lines.
📄️ Flexbox Explained
Flexbox allows easy resizing and repositioning of a flexible container and its items one-dimensionally.
justify-content specifies how browsers should position a flexible container's items along the flexbox's main axis.
order changes a flexible item's default layout.