The direct child elements of a flex container automatically become flex items.
The properties that can be set on a flex item are:
- flex-grow determines the amount, relative to other flex items, that a flex item will grow to fill available space.
- flex-shrink determines the amount, relative to other flex items, that a flex item will shrink to fill available space.
- flex-basis defines the default size of the flex item before shrinking or growing to fill available space.
- flex sets the property for the flex-grow, flex-shrink and basis simultaneously.
- align-self overrides the cross-axis alignment for the flex item inside the flex container.
- order the flex items in the flex container. Items with the same order retain the order that they appear in the DOM.