How Does Flexbox Work?

.container {
  display: flex;
  flex-direction: row; /* row, column, row-reverse, column-reverse */
  justify-content: center; /* main axis alignment */
  align-items: center; /* cross axis alignment */
  flex-wrap: wrap; /* allow wrapping */
  gap: 10px; /* spacing between items */
}

.item {
  flex-grow: 1; /* grow to fill space */
  flex-shrink: 0; /* don't shrink */
  flex-basis: 200px; /* initial size */
  /* Shorthand: flex: 1 0 200px; */
  align-self: flex-end; /* override align-items */
  order: 2; /* change order */
}

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

/* Space between with wrap */
.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}