[Cheat Sheet] CSS Flex-Box

Note: This is a cheat sheet. It’s sums up all the relevant information I collected on this topic. It can serve as your starting point of learning or relearning Flex Box. Follow the links bellow for more detailed explanations.

new layout mode in CSS3 for complex layouts

consists of one flex container and flex items

specify how the flex items are aligned inside the flex container

by default, flex items are displayed in the flex container along a flex line

by default, there is only one flex line (left->right, top->bottom)

you can change the Writing Mode from default to a right-to-left flow (for supporting different languages) by setting direction : rtl; – the direction of the text will also be right to left

the terminology is so abstract for flex because it doesn’t take into consideration the language of the page (the direction set) – this is why terms like ‘right’, ‘left’, ‘top’, ‘bottom’ are avoided. (this is the main reason of confusion when trying to understand flex)

The main axis and the cross axis

to abstract over the writing-mode, Flexbox uses the concepts of the Main Axis and the Cross Axis. Flex Lines follow the Main Axis. The Cross Axis is perpendicular to the Main Axis.

The names for the starting points, ending points, and directions of each axis are as follows:

Main Start

Main End

Main Direction (sometimes called the Flow Direction)

Cross Start

Cross End

Cross Direction

Properties of the Flex Container

flex-direction

allows the changing of the axes of the container

default value is row – flex items are laid out in the direction of the writing mode

other possible values:

row-reverse – swap main start and main end (If the writing-mode is left to right, Flex Items are now laid out right to left.)

column – swap main axes with cross axis (If the writing system is horizontal, the Flex Items are now laid out vertically.)

column-reverse – same as column, but reversed (swap between cross start and cross end)

justify-content

adjust the positions of Flex Items on the Main Axis

possible values:

flex-start (default)

flex-end

center

space-between

space-around

align-items

complementary to justify-content

adjusts the way flex items are positioned on the Cross Axis

possible values:

flex-start

flex-end

center

space-between

space-around

flex-wrap

if set to wrap:

flex items are wrap into additional Flex Lines if there is not enough room for them on one Flex Line

additional flex lines are added in the direction of the cross axis (if needed)

other values:

nowrap – default

wrap-reverse – same as wrap except new Flex Lines will be added in the opposite direction on the Cross Axis

align-content

modifies the behavior of flex-wrap

similar to align-items, but instead of aligning flex items, it aligns flex lines

flex – specify how a flex item will be prioritized when free space is being distributed on the Main Axis

flex: [number] – ratio of free space that should be taken from the total (total is the sum of flex values of all other flex items)

flex: initial – flex item will be inflexible when there is free space but can shrink smaller if needed

flex: none – flex item will not be flexible

visibility

(!not implemented everywhere – better ignore it for now) – when set to collapse, element will affect the cross size of flex container but will not be displayed nor it will consume any space on the main axis

effects that depend on a box appearing in the formatting structure (like incrementing counters or running animations and transitions) still operate on collapsed items.