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).
In the above CSS code:
Line 2: Sets the
display
property toflex
establishing the flex container.Line 4: Sets the
justify-content
property tocenter
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 ...