Flex Container

Flex Container

Align and manage the children along the main axis.

flex-direction

Which direction the items flow:

.container {
  display: flex;
  flex-direction: row;            /* default: left to right */
  flex-direction: row-reverse;    /* right to left */
  flex-direction: column;         /* top to bottom */
  flex-direction: column-reverse; /* bottom to top */
}

flex-wrap

Wrap items to the next line when they don't fit:

.container {
  flex-wrap: nowrap;   /* default: squeeze */
  flex-wrap: wrap;     /* new line when full */
}

flex-flow = direction + wrap in one:

.container {
  flex-flow: row wrap;
}

justify-content (main axis)

.container {
  justify-content: flex-start;    /* default */
  justify-content: flex-end;
  justify-content: center;
  justify-content: space-between; /* full row, edges to sides */
  justify-content: space-around;  /* even gaps */
  justify-content: space-evenly;  /* perfectly equal gaps */
}

align-items (cross axis)

.container {
  align-items: stretch;    /* default: fill */
  align-items: flex-start;
  align-items: flex-end;
  align-items: center;     /* the classic vertical center! */
  align-items: baseline;   /* line up text baselines */
}

align-content (multiple lines)

For WRAPPED flex lines, distribute the whole group vertically:

.container {
  flex-wrap: wrap;
  align-content: center;   /* or space-between, flex-start... */
}

gap

Space between items (also works in grid):

.container {
  gap: 10px;
  gap: 1rem 2rem;   /* row, column */
}

TL;DR

• flex-direction: row/column.
• flex-wrap: wrap: allow wrapping.
• justify-content: main-axis spacing.
• align-items: cross-axis alignment (center!).
• align-content: groups of wrapped lines.
• gap: space between items.