Parent Properties

Flex-Direction

When working with Flexbox we need to think in terms of two axes - the main axis and the cross axis. The main axis is defined by the flex-direction property.

Flex-Wrap

By default, flex items will try to fit onto one line. However, we can change that and allow the items to wrap as needed.

Flex-Flow

Flex-Flow a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

Justify-Content

Justify-Content defines the alignment along the main axis. It helps distribute extra free space.

Align-Items

Align-Items defines the alignment along the cross axis. It works like Justify-Content but in the opposite direction.

Align-Content

Align-Content aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note that it only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse.

Gap

The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges. The gap will only take effect if space applied by justify-content or align-items is smaller.

Children Properties

Flex-Grow

Flex-Grow defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

Flex-Shrink

Flex-Shrink defines the ability for a flex item to shrink if necessary.

Flex-Basis

Flex-Basis defines the default size of an item before the remaining space is distributed.

Flex

Flex is the shorthand for flex-grow, flex-shrink and flex-basis combined.

Align-Self

Align-Self allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.