Flexbox Patterns & Use Cases — CSS

Flexbox patterns & common layouts

Flexbox excels at real-world component layouts. From navigation bars to cards, grids, and app layouts, flexbox provides elegant, responsive solutions without complex CSS. These patterns are building blocks for modern web design.

Navbar / Header layout

CSS

<!-- Full-width navbar with logo, nav, and actions -->
<header class="navbar">
  <div class="navbar-brand">Logo</div>
  <nav class="navbar-menu">
    <a href="#">Home</a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Contact</a>
  </nav>
  <div class="navbar-actions">
    <button class="login">Log In</button>
    <button class="signup">Sign Up</button>
  </div>
</header>

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  gap: 20px;
}

.navbar-brand {
  font-size: 20px;
  font-weight: bold;
  flex: 0 0 auto;
}

.navbar-menu {
  display: flex;
  gap: 30px;
  flex: 1;
  justify-content: center;
}

.navbar-menu a {
  color: #333333;
  text-decoration: none;
  font-weight: 500;
}

.navbar-menu a:hover {
  color: #0066cc;
}

.navbar-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.navbar-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.login {
  background: transparent;
  color: #0066cc;
}

.signup {
  background: #0066cc;
  color: white;
}

Card component with vertical layout

CSS

<!-- Product card with image, content, and footer -->
<div class="card">
  <img src="product.jpg" alt="Product" class="card-image">
  <div class="card-body">
    <h3 class="card-title">Product Name</h3>
    <p class="card-description">Description of the product...</p>
  </div>
  <div class="card-footer">
    <span class="price">$99.99</span>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

.card {
  display: flex;
  flex-direction: column;
  width: 280px;
  background: white;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-body {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card-description {
  font-size: 14px;
  color: #666666;
  margin: 0;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-top: 1px solid #eeeeee;
  background: #f9f9f9;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #0066cc;
}

.add-to-cart {
  background: #0066cc;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

Two-column layout with sidebar

CSS

<!-- Main content with fixed-width sidebar -->
<div class="page-layout">
  <aside class="sidebar">
    <nav class="sidebar-nav">
      <a href="#" class="nav-item">Dashboard</a>
      <a href="#" class="nav-item">Analytics</a>
      <a href="#" class="nav-item">Settings</a>
    </nav>
  </aside>
  <main class="content">
    <div class="content-section">Main content here</div>
  </main>
</div>

.page-layout {
  display: flex;
  gap: 0;
  min-height: 100vh;
}

.sidebar {
  flex: 0 0 250px;
  background: #f5f5f5;
  padding: 20px;
  border-right: 1px solid #eeeeee;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #333333;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s;
}

.nav-item:hover {
  background: #eeeeee;
}

.content {
  flex: 1;
  padding: 40px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .page-layout {
    flex-direction: column;
  }

  .sidebar {
    flex: 0 0 auto;
  }
}

Responsive grid with wrapping

CSS

<!-- Grid that adapts from 4 columns to 1 -->
<div class="feature-grid">
  <div class="feature-card">
    <div class="feature-icon">🎨</div>
    <h3>Design</h3>
    <p>Beautiful designs</p>
  </div>
  <div class="feature-card">...</div>
  <div class="feature-card">...</div>
  <div class="feature-card">...</div>
</div>

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px 20px;
}

.feature-card {
  flex: 0 1 calc(25% - 15px);
  padding: 30px 20px;
  background: white;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.feature-icon {
  font-size: 40px;
}

.feature-card h3 {
  margin: 0;
  font-size: 18px;
}

.feature-card p {
  margin: 0;
  color: #666666;
  font-size: 14px;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
  .feature-card {
    flex: 0 1 calc(33.333% - 14px);  /* 3 columns */
  }
}

@media (max-width: 768px) {
  .feature-card {
    flex: 0 1 calc(50% - 10px);  /* 2 columns */
  }
}

@media (max-width: 480px) {
  .feature-card {
    flex: 0 1 100%;  /* 1 column */
  }

  .feature-grid {
    gap: 10px;
  }
}

Toolbar with grouped buttons

CSS

<!-- Toolbar with button groups -->
<div class="toolbar">
  <div class="toolbar-group">
    <button class="tool-btn">Bold</button>
    <button class="tool-btn">Italic</button>
    <button class="tool-btn">Underline</button>
  </div>
  <div class="toolbar-divider"></div>
  <div class="toolbar-group">
    <button class="tool-btn">Left</button>
    <button class="tool-btn">Center</button>
    <button class="tool-btn">Right</button>
  </div>
  <div class="toolbar-spacer"></div>
  <button class="tool-btn close">Close</button>
</div>

.toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  background: #f9f9f9;
  border: 1px solid #eeeeee;
  border-radius: 4px;
}

.toolbar-group {
  display: flex;
  gap: 0;
  border-right: 1px solid #eeeeee;
  padding-right: 8px;
  margin-right: 8px;
}

.toolbar-group:last-of-type {
  border-right: none;
}

.tool-btn {
  background: none;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  color: #333333;
  font-size: 14px;
  border-radius: 2px;
  transition: background 0.2s;
}

.tool-btn:hover {
  background: rgba(0,0,0,0.05);
}

.tool-btn.active {
  background: rgba(0,102,204,0.1);
  color: #0066cc;
}

.toolbar-divider {
  width: 1px;
  height: 20px;
  background: #eeeeee;
  margin: 0 8px;
}

.toolbar-spacer {
  flex: 1;
  /* Takes up remaining space */
}

Footer layout

CSS

<!-- Multi-column footer -->
<footer class="footer">
  <div class="footer-column">
    <h4>Product</h4>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">Docs</a>
  </div>
  <div class="footer-column">
    <h4>Company</h4>
    <a href="#">About</a>
    <a href="#">Blog</a>
    <a href="#">Careers</a>
  </div>
  <div class="footer-column">
    <h4>Legal</h4>
    <a href="#">Privacy</a>
    <a href="#">Terms</a>
    <a href="#">Contact</a>
  </div>
</footer>

.footer {
  display: flex;
  gap: 40px;
  padding: 60px 40px;
  background: #1a1a1a;
  color: white;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 150px;
}

.footer-column h4 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.footer-column a {
  color: #aaaaaa;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-column a:hover {
  color: white;
}

Note

These patterns showcase flexbox's power for real-world layouts. Most modern web components use flexbox for their internal structure.

Flexbox complete

Congratulations! You've learned the fundamentals of flexbox. Next: CSS Grid for two-dimensional layouts.