CSS Flexbox Layout

One-dimensional layouts made easy and responsive

« The CSS Box Model« Previous CSS Grid Layout »Next »

The Flexible Box Layout Module makes it easier to design flexible responsive layout structures without using float or positioning.

The Flex Container and Alignment

To start using Flexbox, define a flex container by setting display: flex;.

justify-content: Aligns items along the main axis (flex-start, center, flex-end, space-between, space-around, space-evenly).

align-items: Aligns items along the cross axis (stretch, center, flex-start, flex-end).

flex-wrap: Controls whether items wrap to multiple rows (nowrap, wrap).

Responsive Flexbox Navigation Bar

Try It Yourself »

<div style="
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1e293b;
  padding: 12px 24px;
  border-radius: 8px;
  color: white;
  font-family: sans-serif;
">
  <div style="font-size: 1.25rem; font-weight: bold; color: #38bdf8;">BrandLogo</div>
  <div style="display: flex; gap: 16px;">
    <a href="#" style="color: #e2e8f0; text-decoration: none;">Home</a>
    <a href="#" style="color: #e2e8f0; text-decoration: none;">Courses</a>
    <a href="#" style="color: #e2e8f0; text-decoration: none;">Pricing</a>
  </div>
  <button style="background: #0284c7; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer;">
    Sign In
  </button>
</div>

Google AdSense Slot (inContentBanner)

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

Test Yourself With Exercise

+15 XP

Which CSS property centers flex items along the main axis (horizontally by default)?

« Previous: The CSS Box Model Next: CSS Grid Layout »