Search⌘ K
Home
Courses
Learn HTML, CSS, and JavaScript

Aligning and Justifying Content

Explore how to use Flexbox properties justify-content and align-items to align and justify content along horizontal and vertical axes. Learn to create responsive navigation bars by applying these properties with various value options. Gain practical skills in building layouts that adapt well across devices using Flexbox fundamentals.

We'll cover the following...

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