Aligning Flexbox Children: The Role of Axes

After mastering the flex-direction property and understanding the importance of axes in Flexbox, the next logical step is learning how to align children within a flex container. Much like flex-direction, alignment properties are deeply tied to the main axis and cross axis, which can "flip" based on the chosen direction.

In this article, we’ll explore the core alignment properties: justify-content, align-items, and align-self, and how they dynamically respond to the axes.

---

The Two Axes Revisited

Let’s recap the axes:

• Main Axis: Determined by flex-direction.
  • row = Horizontal (left to right).
  • column = Vertical (top to bottom).
• Cross Axis: Always perpendicular to the main axis.
  • If row, the cross axis is vertical.
  • If column, the cross axis is horizontal.

Alignment properties work differently depending on which axis they target:

• justify-content aligns items along the main axis.
• align-items and align-self align items along the cross axis.

When the main axis changes, these properties essentially "flip," as their behavior follows the direction of the axes.

---

Aligning Along the Main Axis: justify-content

The justify-content property controls the alignment of children along the main axis. Depending on the flex-direction, this axis could be horizontal or vertical.

Property Values:

Value	Description
flex-start	Items align to the start of the main axis.
flex-end	Items align to the end of the main axis.
center	Items are centered along the main axis.
space-between	Items are evenly spaced, with no gaps at ends.
space-around	Items are evenly spaced, with gaps at ends.
space-evenly	Items are evenly spaced, including ends.

Examples:

Horizontal Main Axis (row)

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Visual Layout:

  [item1]   [item2]   [item3]

Vertical Main Axis (column)

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Visual Layout:

[item1]
[item2]
[item3]

Notice how the alignment changes based on the main axis direction.

---

Aligning Along the Cross Axis: align-items

The align-items property controls the alignment of children along the cross axis. Unlike justify-content, which focuses on spacing, align-items focuses on positioning items relative to the cross axis.

Property Values:

Value	Description
flex-start	Items align to the start of the cross axis.
flex-end	Items align to the end of the cross axis.
center	Items are centered along the cross axis.
stretch (default)	Items stretch to fill the cross axis.
baseline	Items align along their baseline.

Examples:

Vertical Cross Axis (row)

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Visual Layout:

[item1]
  [item2]
    [item3]

Horizontal Cross Axis (column)

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Visual Layout:

   [item1]
   [item2]
   [item3]

Here, the axis flips again, changing how the children align relative to the cross axis.

---

Overriding Alignment Per Item: align-self

The align-self property allows individual children to override the align-items property. It works exactly like align-items, but only for a specific item.

Example:

.container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.item {
  align-self: center; /* Overrides the container's align-items */
}

---

Quick Reference Table

Property	Axis	Description
justify-content	Main Axis	Aligns children along the main axis.
align-items	Cross Axis	Aligns children along the cross axis.
align-self	Cross Axis	Aligns a specific child along the cross axis.

---

Conclusion

Flexbox alignment properties are simple when you remember the role of axes:

• The main axis is controlled by justify-content.
• The cross axis is controlled by align-items and align-self.

When the main axis changes (via flex-direction), these properties "flip" to align along the new axes. Keep this in mind, and you’ll master Flexbox alignment in no time!