CSS Flexbox Examples

Why Learn Flexbox with Examples?

Flexbox becomes easier when you learn it through real layouts instead of only memorizing properties. Most websites use Flexbox for alignment, spacing, wrapping, and component layout patterns.

• Examples show how Flexbox solves real UI problems.
• You learn when to use display: flex, gap, and wrapping.
• You understand how to align content horizontally and vertically.
• You can reuse patterns for navigation, cards, forms, and dashboards.
• You learn responsive design faster with practical layouts.

CSS Flexbox Examples Cheatsheet

The following table summarizes common Flexbox layout patterns and the key properties used.

Example 1: Flexbox Navigation Bar

A navigation bar is one of the most common Flexbox examples. Flexbox makes it easy to align a logo on the left and navigation links on the right.

<header class="site-header">
  <a href="/" class="logo">PHPKINGDOM</a>

  <nav class="site-nav" aria-label="Main navigation">
    <a href="/tutorials/">Tutorials</a>
    <a href="/examples/">Examples</a>
    <a href="/contact/">Contact</a>
  </nav>
</header>

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

Use align-items: center for vertical alignment and justify-content: space-between to separate the logo and links.

Example 2: Center an Element Horizontally and Vertically

Flexbox makes perfect centering simple.

<section class="center-layout">
  <div class="message-box">
    <h2>Centered Content</h2>
    <p>This box is centered using Flexbox.</p>
  </div>
</section>

.center-layout {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-box {
  max-width: 480px;
  padding: 2rem;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
}

Example 3: Responsive Card Layout

Flexbox can create responsive card layouts that wrap automatically on smaller screens.

<div class="card-list">
  <article class="card">
    <h3>HTML</h3>
    <p>Learn page structure.</p>
  </article>

  <article class="card">
    <h3>CSS</h3>
    <p>Learn visual styling.</p>
  </article>

  <article class="card">
    <h3>JavaScript</h3>
    <p>Learn interactivity.</p>
  </article>
</div>

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 260px;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
}

flex: 1 1 260px means each card can grow, shrink, and start around 260px wide.

Example 4: Button Group with Flexbox

Flexbox is useful for aligning buttons with consistent spacing.

<div class="button-group">
  <button type="button">Save</button>
  <button type="button">Preview</button>
  <button type="button">Cancel</button>
</div>

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button-group button {
  min-height: 44px;
  padding: 0.75rem 1rem;
}

Use flex-wrap: wrap so buttons do not overflow on small screens.

Example 5: Responsive Form Row

Flexbox can align form fields and buttons while still wrapping on mobile.

<form class="search-form">
  <label class="field">
    Search
    <input type="search" name="q" placeholder="Search tutorials" />
  </label>

  <button type="submit">Search</button>
</form>

.search-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
}

.search-form .field {
  flex: 1 1 260px;
}

.search-form input {
  width: 100%;
}

Example 6: Media Object Layout

A media object layout places an image or icon beside text content.

<article class="media-card">
  <img src="/images/avatar.png" alt="Author avatar" class="media-image" />

  <div class="media-content">
    <h3>Frontend Developer</h3>
    <p>Builds accessible and responsive UI components.</p>
  </div>
</article>

.media-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.media-image {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.media-content {
  min-width: 0;
}

min-width: 0 helps long text shrink properly inside a flex row.

Example 7: Equal-Height Pricing Cards

Flexbox can create pricing cards with equal height and aligned buttons.

<div class="pricing-list">
  <article class="pricing-card">
    <h3>Basic</h3>
    <p>$9/month</p>
    <ul>
      <li>HTML Tutorials</li>
      <li>CSS Tutorials</li>
    </ul>
    <a href="/pricing/" class="pricing-action">Choose Plan</a>
  </article>

  <article class="pricing-card">
    <h3>Pro</h3>
    <p>$19/month</p>
    <ul>
      <li>All Tutorials</li>
      <li>Projects</li>
      <li>Interview Questions</li>
    </ul>
    <a href="/pricing/" class="pricing-action">Choose Plan</a>
  </article>
</div>

.pricing-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
}

.pricing-card {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
}

.pricing-action {
  margin-top: auto;
}

margin-top: auto pushes the action link to the bottom of each card.

Example 8: Sticky Footer Layout

Flexbox can keep the footer at the bottom of the viewport when page content is short.

<body class="page-layout">
  <header>Header</header>
  <main class="page-main">Main content</main>
  <footer>Footer</footer>
</body>

.page-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-main {
  flex: 1;
}

The main content grows to fill available space, pushing the footer to the bottom.

Example 9: Split Content Layout

Use Flexbox to create a two-column layout that stacks on mobile.

<section class="split-layout">
  <div>
    <h2>Learn CSS Faster</h2>
    <p>Practice real examples and reusable UI patterns.</p>
  </div>

  <div>
    <img src="/images/css-example.png" alt="CSS layout example" />
  </div>
</section>

.split-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.split-layout > * {
  flex: 1;
}

@media (min-width: 768px) {
  .split-layout {
    flex-direction: row;
    align-items: center;
  }
}

Example 10: Dashboard Stats Row

Flexbox works well for dashboard summary cards and statistic rows.

<section class="stats-row">
  <article class="stat-card">
    <h3>Visitors</h3>
    <p>12,450</p>
  </article>

  <article class="stat-card">
    <h3>Pages</h3>
    <p>320</p>
  </article>

  <article class="stat-card">
    <h3>Conversions</h3>
    <p>8.4%</p>
  </article>
</section>

.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.stat-card {
  flex: 1 1 220px;
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.75rem;
}

Flexbox Examples and Accessibility

Flexbox changes visual layout, but screen readers and keyboard users still follow the HTML source order.

• Keep source order logical and meaningful.
• Avoid using order to create confusing visual order.
• Use visible focus states for buttons, links, and form controls.
• Keep touch targets large enough on mobile.
• Use semantic HTML for navigation, forms, cards, and page sections.
• Do not rely on visual position alone to communicate meaning.

Flexbox Examples and SEO

Flexbox does not directly improve rankings, but it supports SEO-friendly user experience by improving mobile layout, readability, content structure, and accessibility.

• Responsive layouts improve mobile usability.
• Readable card and section layouts improve engagement.
• Semantic HTML plus Flexbox keeps content meaningful.
• Cleaner layouts help users scan content faster.
• Better UI quality supports trust and content consumption.

Common Mistakes in Flexbox Examples

• Using Flexbox for complex two-dimensional layouts where CSS Grid is better.
• Forgetting flex-wrap: wrap; on responsive card rows.
• Using margin hacks instead of gap.
• Changing visual order with order in a way that hurts accessibility.
• Forgetting min-width: 0; for long text inside flex rows.
• Not testing examples on mobile and zoomed screens.
• Using non-semantic HTML when semantic sections, articles, nav, or forms are better.

CSS Flexbox Examples Best Practices

• Use Flexbox for one-dimensional rows and columns.
• Use CSS Grid for complex rows and columns together.
• Use gap for spacing between items.
• Use flex-wrap: wrap; for responsive item groups.
• Use flex: 1 1 value; for flexible responsive cards.
• Use inline-flex for icon buttons and compact inline controls.
• Use semantic HTML with Flexbox for better accessibility and SEO.
• Keep source order logical.
• Test every example on mobile, tablet, desktop, and keyboard navigation.

Key Takeaways

• Flexbox is ideal for practical one-dimensional layout examples.
• Use Flexbox for navigation bars, buttons, cards, forms, and media objects.
• gap creates clean spacing between flex items.
• flex-wrap helps layouts work on smaller screens.
• flex: 1 1 260px is useful for responsive cards.
• Semantic HTML plus Flexbox creates better accessibility and SEO-friendly layouts.