Skip to content

CSS Flexbox Cheat Sheet

The Flexbox (Flexible Box) layout model provides a more efficient way to align and distribute items within a container, even when their size is unknown or dynamic.

Flex Container

Set on parent: display: flex; or display: inline-flex;

Property Description Common Values
flex-direction Main axis direction row, row-reverse, column, column-reverse
flex-wrap Whether to wrap nowrap, wrap, wrap-reverse
flex-flow Shorthand for direction and wrap row wrap
justify-content Alignment on main axis flex-start, flex-end, center, space-between, space-around
align-items Alignment on cross axis flex-start, flex-end, center, baseline, stretch
align-content Alignment of multi-lines on cross axis flex-start, flex-end, center, space-between, stretch

Flex Items

Set on children:

Property Description Default
order Sorting order (lower values come first) 0
flex-grow Growth factor (when space is available) 0
flex-shrink Shrink factor (when space is tight) 1
flex-basis Base size before space distribution auto
flex Shorthand for grow, shrink, and basis 0 1 auto
align-self Allows individual item to have different alignment auto

Core Concepts

  • Main Axis: Horizontal by default, defined by flex-direction.
  • Cross Axis: Perpendicular to the main axis.

Examples

Horizontal and Vertical Centering 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Equal Width Distribution 

.item {
  flex: 1; /* Uniformly occupy remaining space */
}

Space Between Alignment 

.navbar {
  display: flex;
  justify-content: space-between;
}