...

/

Aligning and Justifying Content

Aligning and Justifying Content

Use Flexbox to align and justify content for responsive designs on a variety of different devices.

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).

Using justify-content to center items horizontally

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 items along the ...