All Articles

Flexbox - the Ultimate Summary

Concept

Flexbox is 1 dimension layout, in which case, we can consider it as one continuous row.

Key items

A Flexbox layout could not live without both flex container and flex items. We can consider them as the row and cells when layouting using the float layout. And the flex items must be the direct children of the flex container.

The axis

When flex container set to column, main axis matches the direction of the flex container, which is vertical. The relevant cross axis is horizontal.

When flex container set to row, main axis matches the direction of the flex container, which is horizontal. The relevant cross axis is vertical.

Flexbox Properties

Parent (Flex Container)

display: flex | inline-flex;

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: wrap | nowrap | wrap-reverse;

flex-flow (shorthand for flex-direction and flex-wrap)

justify-content (main axis): flex-start | flex-end | center | space-between | space-around | space-evenly;

align-items (cross axis - adjust to individual sizes): flex-start | flex-end | center | baseline | stretch;

align-content (cross axis - adjust to largest item): flex-start | flex-end | center | stretch | space-between | space-around;

Children (Flex Items)

order: <integer>;

flex-grow: <number>;

flex-shrink: <number>;

flex-basis: <length> | auto;

flex: shorthand for grow, shrink, and basis (default:  0 1 auto)

align-self: overrides alignment set on parent

Resources

Published Apr 15, 2020

Personal blog. I share frontend development technique and life.