Flexbox

CSS Flexbox

Flexbox makes one-dimensional layouts easy. Apply display: flex to the container:

.container {
  display: flex;
  flex-direction: row;        /* row (default) | column */
  justify-content: center;    /* main axis alignment */
  align-items: center;        /* cross axis alignment */
  gap: 16px;                  /* space between items */
}

justify-content values: flex-start, flex-end, center, space-between, space-around, space-evenly

align-items values: flex-start, flex-end, center, stretch, baseline

Flex items (the children):

.item {
  flex: 1;          /* grow to fill available space */
  flex-shrink: 0;   /* don't shrink */
}

Centering anything with flexbox:

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

Your Task

Create a flex container with items aligned using flex-direction, align-items, justify-content, and gap.