CSS Flexbox cheat sheet

On the container

.container {
  display: flex;
  flex-direction: row;       /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;           /* nowrap | wrap | wrap-reverse */
  justify-content: center;   /* alignment on the main axis */
  align-items: center;       /* alignment on the cross axis */
  gap: 1rem;
}

justify-content

On the children

.child {
  flex-grow: 1;      /* ability to grow and fill free space */
  flex-shrink: 1;    /* ability to shrink when space is tight */
  flex-basis: 200px; /* starting size before grow/shrink */
  align-self: flex-start; /* override align-items for this item */
  order: 2;           /* visually reorder without touching the HTML */
}

Centring an element (the classic)

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

gap instead of margin

/* to avoid: margin on every child, undone on the last one */
.child { margin-right: 1rem; }
.child:last-child { margin-right: 0; }

/* better: gap handles spacing for you */
.container { display: flex; gap: 1rem; }