CSS Flexbox Layout

Flexbox is a one-dimensional layout system for arranging items in rows or columns with flexible sizing and alignment.

Flex Container

display: flex creates a flex container.

flex-direction: row | column sets main axis.

justify-content aligns items along main axis.

align-items aligns items along cross axis.

flex-wrap controls wrapping to new lines.

/* Flex container */
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Column layout */
.column {
  display: flex;
  flex-direction: column;
}

/* Centered */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}