Flexbox container properties help you control the alignment of items along the main axis and the cross axis. Two important properties are justify-content and align-items.

• justify-content controls how flex items are aligned along the main axis. You can use it to distribute extra space between items or push items to one side.
• align-items controls how flex items are aligned along the cross axis. This property makes it easy to vertically center, stretch, or align items in other ways based on the container's height.

These properties ensure your layout is balanced and the elements are positioned exactly as you want.

Syntax

Follow the code block below to set container properties in a flex container:

/* Align items along the main axis */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

/* Align items along the cross axis */
align-items: flex-start | flex-end | center | baseline | stretch;

Explanation:

• justify-content:
  • flex-start: Aligns items to the start of the main axis (default).
  • flex-end: Aligns items to the end of the main axis.
  • center: Centers items along the main axis.
  • space-between: Distributes items evenly; first item is at the start and last at the end.
  • space-around: Items are evenly distributed with equal space around them.
  • space-evenly: Distributes items with equal space between them.
• align-items:
  • flex-start: Aligns items to the start of the cross axis.
  • flex-end: Aligns items to the end of the cross axis.
  • center: Centers items along the cross axis.
  • baseline: Aligns items such that their baselines align.
  • stretch: Stretches items to fill the container along the cross axis.

Example 1: Using justify-content for Main Axis Alignment

In this example, we set up a flex container and use justify-content to center the items along the main axis. The items will be equally spaced from the left and right of the container.

Explanation:

• justify-content: center;
  • All three items are centered along the horizontal main axis.
• Outcome:
  • The items appear centered within the container, with equal space on both sides.

Example 2: Using align-items for Cross Axis Alignment

In this example, we create a flex container with a fixed height and use align-items to center the items along the vertical cross axis.

Explanation:

• align-items: center;
  • The items are vertically centered within the container's 200px height.
• Outcome:
  • Regardless of each item's height, they are aligned centrally along the cross axis, improving the vertical layout.

This lesson shows how to use justify-content and align-items to control the placement of items within a flex container. These properties help you achieve balanced and visually appealing layouts by aligning items along both the main and cross axes.