Flexbox Layouts & Alignment

« CSS Media Queries & Breakpoints« Previous CSS Grid: 2D Layouts & Auto-Fit »Next »

Harness CSS Flexbox for 1-dimensional layouts: vertical centering, space-between navbars, and wrap cards.

Understanding the Main Axis and Cross Axis

Flexbox organizes items along two axes:

Main Axis: Defined by flex-direction (row = horizontal left-to-right, column = vertical top-to-bottom). Controlled by justify-content.

Cross Axis: Perpendicular to the main axis. Controlled by align-items.

Classic Space-Between Navbar with Vertically Centered Items

Try It Yourself »

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Pushes brand to left and links to right */
  align-items: center;            /* Perfect vertical centering */
  padding: 16px 24px;
  background: #0f172a;
}

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which Flexbox property controls alignment along the main axis?

« Previous: CSS Media Queries & Breakpoints Next: CSS Grid: 2D Layouts & Auto-Fit »