CSS flexbox alignment cheat sheet

Need a quick reference for flexbox alignment properties and common layout patterns.

Flexbox alignment reference:

/* Container properties */
.flex-container {
  display: flex;
  
  /* Main axis direction */
  flex-direction: row;      /* row | row-reverse | column | column-reverse */
  
  /* Wrapping */
  flex-wrap: wrap;          /* nowrap | wrap | wrap-reverse */
  
  /* Main axis alignment */
  justify-content: center;  /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  
  /* Cross axis alignment (single line) */
  align-items: center;      /* stretch | flex-start | flex-end | center | baseline */
  
  /* Cross axis alignment (multi-line) */
  align-content: center;    /* stretch | flex-start | flex-end | center | space-between | space-around */
  
  /* Gap between items */
  gap: 1rem;               /* row-gap column-gap */
}

/* Item properties */
.flex-item {
  flex: 1;                 /* flex-grow flex-shrink flex-basis */
  /* flex: 1 = flex: 1 1 0% */
  /* flex: auto = flex: 1 1 auto */
  /* flex: none = flex: 0 0 auto */
  
  align-self: flex-end;    /* Override align-items for this item */
  order: -1;               /* Visual order (default: 0) */
}

/* Common patterns */
/* Center everything */
.center { display: flex; justify-content: center; align-items: center; }

/* Push last item to end */
.nav { display: flex; gap: 1rem; }
.nav > :last-child { margin-left: auto; }

/* Equal columns */
.columns { display: flex; }
.columns > * { flex: 1; }

/* Sticky footer */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1; }

Flexbox is the most common CSS layout mechanism. Knowing the properties eliminates trial-and-error alignment.

CSS layout - quick reference