Flexbox Alignment: Justify Content, Align Items, and Align Self

Master CSS Flexbox alignment. Learn how to distribute space and align items along the main and cross axes using alignment properties.

Introduction

One of the biggest struggles in CSS before Flexbox was simple alignment. For years, vertically centering a box inside a container required hacky absolute offsets or tables.

Flexbox solved this alignment challenge. By providing properties to align items and distribute empty space along both the Main Axis and the Cross Axis, Flexbox makes alignment straightforward. Whether you are centering a hero banner title, building a navigation bar with evenly spaced links, or overriding alignment for a single item, Flexbox alignment handles it with a few lines of code.

What You Will Learn

  • Aligning items along the Main Axis using justify-content.
  • Aligning items along the Cross Axis using align-items.
  • Overriding alignment for individual items using align-self.
  • Distributing space between wrapped lines using align-content.
  • The classic Flexbox vertical centering technique.

Prerequisites

Detailed Explanation: Axis Alignment

Flexbox provides separate properties to control alignment depending on the axis.

1. Main Axis Alignment (justify-content)

Controls how space is distributed between and around flex items along the Main Axis (usually horizontal):

  • flex-start: (Default) Items pack tightly at the start of the axis.
  • flex-end: Items pack tightly at the end of the axis.
  • center: Items are centered along the axis.
  • space-between: Items are distributed evenly. The first item is aligned to the start edge, and the last item is aligned to the end edge.
  • space-around: Items are distributed evenly with equal space on both sides. The gap between items is twice as wide as the gap at the start and end edges.
  • space-evenly: Items are distributed so that the spacing between any two items, and the space to the edges, is exactly the same.
.nav-container {
  display: flex;
  justify-content: space-between; /* Brand on left, menu on right */
}

2. Cross Axis Alignment (align-items)

Controls how flex items are aligned along the Cross Axis (usually vertical) within their current row:

  • stretch: (Default) Items stretch to fill the full height of the container.
  • flex-start: Items align to the top edge of the container.
  • flex-end: Items align to the bottom edge of the container.
  • center: Items are vertically centered relative to each other.
  • baseline: Items align so that their text baselines line up.

3. Individual Item Override (align-self)

Allows a single flex item to override the container's align-items setting.

  • Values: auto, flex-start, flex-end, center, baseline, stretch.
.flex-parent {
  display: flex;
  align-items: center; /* Center all items vertically */
}

.flex-child-special {
  align-self: flex-end; /* Force this single item to the bottom */
}

4. Wrapped Line Spacing (align-content)

Controls how space is distributed between wrapped rows of items along the Cross Axis when flex-wrap: wrap is enabled.

  • Values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch.
  • Note: This property has no effect if there is only a single row of flex items.

The Ultimate Centering Trick

To center an element perfectly both horizontally and vertically inside a container, combine justify-content and align-items:

.center-box {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;     /* Vertical centering */
}

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Justify Content Options
    SpaceBetween[space-between: Spaced out. Outer items touch container borders.]
    SpaceEvenly[space-evenly: Even gaps everywhere, including start and end margins.]
    end

Code Examples

Example 1: Perfect Vertical Alignment of Icons and Text

Use align-items: center to align an icon and text vertically:

.alert-box {
  display: flex;
  /* Vertically center icon, heading, and close button */
  align-items: center; 
  
  padding: 16px;
  background-color: #fee2e2;
  border-radius: 8px;
}

.alert-box__icon {
  margin-right: 12px;
}

.alert-box__content {
  flex-grow: 1;
}

Example 2: Complex Header Navigation Bar

Assemble a standard navigation layout using space distribution:

.site-header {
  display: flex;
  /* Logo on left edge, links on right edge */
  justify-content: space-between; 
  
  /* Center links vertically relative to logo size */
  align-items: center; 
  
  height: 70px;
  padding: 0 40px;
  border-bottom: 1px solid #e2e8f0;
}

.nav-links {
  display: flex;
  /* Separate menu items horizontally */
  justify-content: space-evenly;
  width: 300px;
}

Best Practices & Common Mistakes

  • Align Content on Single Lines: A common mistake is declaring align-content: center to center items inside a container with a single row of items. This property only applies to multi-line wrapped layouts. Use align-items instead.
  • Flex Direction Axis Shifts: Remember that if flex-direction is set to column, the Main Axis runs vertically. In this case, justify-content controls vertical alignment, and align-items controls horizontal alignment.

FAQs

Q: How does baseline alignment work? A: Baseline alignment lines up the text baselines of different items, regardless of font sizes or element padding differences. This is useful for keeping labels and text fields aligned horizontally.

Q: Can I use margin auto to align individual flex items? A: Yes! Declaring margin-left: auto; on a flex item inside a row container will push it all the way to the right side of the container, acting as a flexible spacer.

Summary

CSS Flexbox alignment coordinates layout spacing. While justify-content distributes items along the Main Axis, align-items manages vertical alignment within rows. You can also override alignment for individual items using align-self, and distribute space between multiple wrapped rows using align-content.

Related Articles

Next Tutorial

How do flex items grow, shrink, and calculate their base sizes dynamically? Let's check: Flexbox Sizing & Item Properties.

← Back to Syllabus