Practical Flexbox Patterns — Navigation Bars, Card Rows, and Centered Content

This lesson is applied practice. You have all the properties — display: flex, flex-direction, justify-content, align-items, flex-wrap, and gap. Now you will use them to build the three layout patterns that appear on almost every website: a navigation bar, a card row, and a centered content section.

Pattern 1 — The horizontal navigation bar

A navigation bar needs three things:

• Items in a row (not stacked vertically)
• Logo on the left, nav links on the right (or centered, depending on the design)
• Everything vertically centered regardless of item height

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

.site-nav {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.site-nav a:hover {
  color: #a8c97f;
}

The outer .site-header uses space-between to push logo and nav to opposite ends. The inner .site-nav uses gap to space the links evenly. Both use align-items: center (on the header) to keep everything on the same vertical centerline.

Pattern 2 — The tour card grid

A card grid needs:

• Cards in a row
• Cards that wrap when they run out of horizontal space
• Consistent gap between cards
• Cards of equal height regardless of content length

.tours-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.tour-card {
  flex: 1 1 280px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 1px solid #e0ddd8;
  border-radius: 8px;
  overflow: hidden;
}

.tour-card-body {
  flex: 1;
  padding: 1.5rem;
}

.tour-card-cta {
  padding: 1rem 1.5rem;
  margin-top: auto;
}

The .tours-grid is the outer flex container with wrapping. Each .tour-card is itself a flex container (column direction) so its internal content — image, body, button — stacks vertically with the button anchored to the bottom via margin-top: auto on .tour-card-cta.

Pattern 3 — The centered hero section

A hero section needs content centered both horizontally and vertically within a tall container:

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

.hero-content {
  max-width: 680px;
  padding: 2rem;
}

.hero h1 {
  color: #f5f0eb;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero p {
  color: #d0e8c5;
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-cta {
  display: inline-block;
  background-color: #f5f0eb;
  color: #2c4a1e;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}

The .hero container uses both justify-content: center and align-items: center to place the .hero-content block at the exact center of the section. The min-height ensures the section is tall enough to make the centering visible.

Combining patterns

Real pages combine these patterns. The STO homepage uses all three simultaneously:

[site-header — flex, space-between, align-items: center]
  [logo]                    [site-nav — flex, gap]
                              [Home] [Tours] [About] [Contact]

[hero — flex, justify-content: center, align-items: center]
  [hero-content]
    [h1] [p] [cta button]

[tours section]
  [section-heading]
  [tours-grid — flex, flex-wrap, gap]
    [tour-card — flex, column]  [tour-card]  [tour-card]

None of these patterns conflict. They are separate flex contexts — each display: flex creates an independent formatting context for its own children.

The complete Module 05 exercise

Build all three patterns in the STO site:

1. Navigation bar — Apply the .site-header and .site-nav rules above. Adjust class names to match your HTML.

2. Tour card grid — Apply the .tours-grid and .tour-card rules. If your cards have a separate body and button area, use the column layout to pin the button.

3. Hero section — Apply the .hero and .hero-content rules. If you don’t have a hero image yet, the background-color fallback will show the dark green.

4. Open the browser and resize from desktop width (~1200px) to mobile (~375px):

   • The header nav should stack or adjust at mobile widths (you will add media queries in Module 06 — for now it is acceptable if the nav wraps)
   • The tour cards should reflow from three columns to two columns to one column
   • The hero content should remain centered at all widths

5. Open DevTools and inspect each flex container. Use the Flexbox inspector overlay to verify the main axis and cross axis on each container.

Module 05 recap

You now have the full Flexbox toolkit:

Concept	Property	What it does
Activate	display: flex	Turns element into a flex container
Direction	flex-direction	Row (default) or column; sets the main axis
Main axis spacing	justify-content	How items are distributed along the main axis
Cross axis alignment	align-items	How items align across the main axis
Individual override	align-self	Per-item cross-axis alignment
Wrapping	flex-wrap	Whether items wrap to new lines
Item sizing	flex	grow / shrink / basis shorthand
Spacing	gap	Space between items (no outer-edge margin)

Flexbox is a one-dimensional system — it handles rows or columns, but not both simultaneously. For two-dimensional grid layouts (rows and columns at the same time), CSS Grid is the right tool — but Flexbox is the right choice for the vast majority of component-level layout work.

Module 06 adds responsive design with media queries, allowing the STO site to adapt its Flexbox layouts at specific breakpoints for mobile screens.