Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

flexbox
css

What are justify-content and align-items in CSS Flexbox?

Abel Lifaefi Mbula

Overview

Flexbox is a modern CSS layout feature that allows us to arrange items in rows, columns, and in one dimension. To use it, we have to set a special display value on the parent element or container.

parent {
  display: flex;
}

This will automatically arrange the children's elements in a row. However, we can change this behavior by setting a value using flex-direction: column. In this shot, we will learn more about two main properties of Flexbox:

  • The justify-content property
  • The align-items property

The justify-content property

The justify-content property controls where the flex items sit on the main (or x) axis. Let's see the available values.

  • flex-start: This is the default value that aligns items at the start of the main axis.
  • flex-end: This makes items sit at the end of the main axis.
  • center: This makes the flex items sit at the center of the main axis.
  • space-between: This distributes the remaining space between the flex items.
  • space-around: This distributes the remaining space around the flex items.
The justify-content output

The align-items property

The align-items property controls where the flex items sit on the cross (or y) axis. To control a single flex item instead of all, we can use the align-self property on it. Let's see the available values.

  • stretch: This stretches flex items to fill the parent in the direction of the cross axis. This is a default value.
  • baseline: This aligns the flex items at the baseline of the cross axis.
  • center: This aligns the flex items at the center of the cross axis, and centers them vertically by default.
  • flex-start: This aligns the flex items at the start of the cross axis, and aligns them vertically by default.
  • flex-end: This aligns the flex items at the end of the cross axis.

Note: The baseline is the line upon which most letters "sit" and below which the descenders extend.

The align-items output

RELATED TAGS

flexbox
css
RELATED COURSES

View all Courses

Keep Exploring