What properties of justify-content and align-items in a flexbox container are responsible for?

In a Flexbox container:

• justify-content controls the alignment of items along the main axis (usually horizontal). For example, using justify-content: center; will group all items in the center of the container.

• align-items is responsible for aligning items along the cross axis (usually vertical). For example, align-items: flex-start; will align all items to the top edge of the container.

Example:

.container {
  display: flex;
  justify-content: space-between; /* distributes items with equal gaps */
  align-items: center; /* aligns items vertically to the center */
}