Aligning and Justifying Content

In this lesson, we’ll explore how to align and justify content using Flexbox properties such as justify-content and align-items. We’ll also demonstrate how to create responsive navigation bars utilizing these properties.

Understanding justify-content and align-items

The justify-content property aligns flex items along the main axis of the flex container, which is determined by the flex-direction property (default is left to right). The align-items property aligns items along the vertical-axis (perpendicular to the main axis).

In the above CSS code:

• Line 2: Sets the display property to flex establishing the flex container.

• Line 4: Sets the justify-content property to center which horizontally centers the flex items.

• The child <div> elements become flex items that are aligned along the main axis.

Using align-items

The align-items property aligns flex ...