What properties do justify-content and align-items of a flexbox container control?

In a Flexbox container, the properties justify-content and align-items are responsible for aligning child elements, but along different axes:

• justify-content manages the alignment of items along the main axis, which is horizontal by default. It determines how free space is distributed between and around the items.

  Examples of values:

  • flex-start — items are pushed to the start of the container.
  • center — items are centered.
  • space-between — equal space between items.

• align-items manages the alignment of items along the cross axis, usually vertical.

  Examples of values:

  • stretch (default) — items stretch to fill the container's height.
  • center — items are aligned vertically in the center.
  • flex-start — items are pushed to the top.

Thus, these properties allow flexible control over the positioning of elements inside a flex container.