Aligning Items — justify-content, align-items, and align-self

Flexbox’s alignment properties are what make it so much more powerful than float-based layouts. Three properties handle the vast majority of alignment work: justify-content controls spacing along the main axis, align-items controls alignment along the cross axis, and align-self lets individual items override the container’s cross-axis alignment.

justify-content — main axis spacing

justify-content distributes flex items along the main axis (the direction they flow). It takes effect when there is leftover space in the container after items have been sized.

.site-nav {
  display: flex;
  justify-content: space-between;
}

The values:

Value	Effect
flex-start	Items packed at the start (default)
flex-end	Items packed at the end
center	Items centered along the main axis
space-between	First item at start, last at end, equal space between
space-around	Equal space on both sides of each item (half-sized gaps at edges)
space-evenly	Equal space between all items, including edges

For the STO navigation bar, space-between places the logo at the far left and the nav links at the far right. center works for a hero section with a single content block.

align-items — cross axis alignment

align-items aligns flex items along the cross axis (perpendicular to the flow direction). This is what makes all items in a row the same height, or lets you vertically center content.

.site-nav {
  display: flex;
  align-items: center; /* vertically centers nav items */
}

The values:

Value	Effect
stretch	Items stretch to fill the container’s cross-axis size (default)
center	Items centered on the cross axis
flex-start	Items aligned to the start of the cross axis
flex-end	Items aligned to the end of the cross axis
baseline	Items aligned so their text baselines line up

stretch (the default) is why all flex items in a row are the same height — they each stretch to match the tallest item. This is the property that makes equal-height columns trivially easy in Flexbox.

align-items: center is how you vertically center content in a fixed-height container — something that required complex hacks before Flexbox.

Vertical centering with Flexbox

The classic “how do I center something vertically” problem:

.hero {
  display: flex;
  justify-content: center;   /* horizontally centered */
  align-items: center;       /* vertically centered */
  min-height: 500px;
}

Two declarations. Before Flexbox, vertical centering required absolute positioning, negative margins, or table-cell tricks. With Flexbox, align-items: center is all you need.

align-self — override for individual items

align-self lets a single flex item override the container’s align-items value:

.site-nav {
  display: flex;
  align-items: center; /* all items centered by default */
}

.nav-cta {
  align-self: stretch; /* this one item stretches instead */
}

All values are the same as align-items, plus auto (which reverts to the container’s align-items value).

This is useful when one item in a row needs different cross-axis alignment than the others — a “Book Now” button that stretches to the full nav height while other nav items are centered.

Combining justify-content and align-items

The power emerges when you use both together:

/* Navigation bar — items in a row, logo left, links right, all vertically centered */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

/* Hero section — content horizontally and vertically centered */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
}

/* Tour card row — cards spread across the row with space between */
.tours-grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* default, but explicit */
}

The gap property

gap adds space between flex items without using margins:

.site-nav {
  display: flex;
  gap: 1.5rem; /* space between all nav links */
}

.tours-grid {
  display: flex;
  gap: 2rem; /* space between tour cards */
}

gap is cleaner than margins because it only creates space between items, not on the outer edges. You can set row-gap and column-gap separately, or use the gap shorthand for both.

Exercise

Apply alignment to the STO header and hero:

1. Style the site header to spread logo and navigation, with everything vertically centered:

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #2c4a1e;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
}

2. Style the navigation links (adjust the selector to match your HTML):

.site-nav a {
  color: #f5f0eb;
  text-decoration: none;
  font-weight: 600;
}

3. Apply centering to the hero section:

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  background: rgba(44, 74, 30, 0.55) url('../images/hero.jpg') no-repeat center / cover;
  background-color: #2c4a1e;
}

4. Open the browser. The header should show the logo on the left, navigation on the right, everything vertically centered on the same baseline. The hero content should be centered in the section.

5. Resize the viewport. The centered content should remain centered regardless of window width.

Recap

• justify-content controls spacing along the main axis: flex-start | center | flex-end | space-between | space-around | space-evenly.
• align-items controls alignment along the cross axis: stretch (default) | center | flex-start | flex-end | baseline.
• align-self on a flex item overrides the container’s align-items for that one item.
• Combine justify-content: center and align-items: center to center content both horizontally and vertically.
• gap adds consistent space between items without outer-edge margins.

Lesson 05 covers flex-wrap — what happens when items don’t fit on one line — and the flex shorthand that controls how items grow and shrink.