Flexbox Alignment

The hardest part of Flexbox is not the flex model — it is remembering which alignment property works on which axis. Six properties, two axes, and one mental model that makes them all click into place. Read this lesson carefully and the "which property do I need?" question becomes automatic.

The mental model: justify vs align

Write this somewhere and internalize it:

• justify- properties work on the main axis.
• align- properties work on the cross axis.

That is the whole model. Every Flexbox alignment property follows this pattern without exception. If your main axis is row (horizontal), then justify-content controls left-right distribution, and align-items controls vertical positioning. Flip to column and the axes flip too.

justify-content: distributing along the main axis

justify-content controls how items are distributed in the space that remains on the main axis after items are sized.

.container {
  display: flex;
  justify-content: flex-start;    /* default: items huddle at the start */
}

The useful values:

space-between is the one you reach for most in nav bars and toolbars: logo on the left, links on the right, all gaps equal.

align-items: positioning on the cross axis

align-items controls how items are positioned across the cross axis of the container. It applies to all items at once.

.container {
  display: flex;
  height: 120px;
  align-items: center;  /* items centered vertically when flex-direction: row */
}

baseline is underrated. When you have items of different sizes — a large heading next to a smaller label — baseline keeps the text optically aligned in a way that center does not.

align-self: override for a single item

align-self applies to an individual flex item and overrides align-items for that item only. The values are the same.

.container { display: flex; align-items: center; }
.special   { align-self: flex-end; }  /* this one sticks to the bottom */

This is the escape hatch: when ninety percent of the items should be centered but one needs to be pinned to the edge, align-self solves it without restructuring the container.

align-content: for wrapped containers only

When flex-wrap: wrap is set and items break onto multiple lines, there is now space on the cross axis between those lines. align-content distributes that space — it is justify-content but for the lines on the cross axis.

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

align-content has no effect on single-line containers (no wrapping, or only one line of items). Trying to use it when items do not wrap is one of the more confusing "why is this not working" moments in Flexbox — now you know why.

The centering pattern

Vertical and horizontal centering is a solved problem in Flexbox:

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

That is it. Two lines. The container sizes to whatever it is given; everything inside it is centered on both axes. Before Flexbox this required negative margins, absolute positioning, and a fixed-height parent. Keep this snippet memorized — you will use it constantly.

A full reference at a glance

.container {
  display: flex;
  flex-direction: row;         /* main axis: horizontal */

  justify-content: center;     /* main axis (horizontal): center items */
  align-items: stretch;        /* cross axis (vertical): stretch to fill */
  align-content: flex-start;   /* cross axis, only when wrapping */
}

.item-exception {
  align-self: flex-end;        /* overrides align-items for this one item */
}

Where to go next

One dimension is mastered. Next: CSS Grid — the two-dimensional layout system that controls both rows and columns at once, making complex page layouts composable without nesting.