Flexbox cheatsheet

CSS Flexible Box Layout is a module of CSS that defines a CSS box model optimized for user interface design, and the layout of items in one dimension. Setting the display: flex for the html element offers alternative, generally more flexible way, of controlling the flow within the element.

Terminology

Flex container

Flex container can take 6 different properties:

How elements aligned on main-axis:

How elements aligned on cross-axis:

How elements are aligned in multi-line container:

Flex items:

Overwrite align-content from container, align on cross-axis:

Relative flex items:

Absolute flex items:

References

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

Codepen: https://codepen.io/mikkqu/pen/MPXMoM