CSS Flexbox Examples

Practical implementations of CSS Flexbox layouts with comprehensive examples
What You'll Learn

This page contains practical examples of CSS Flexbox implementations that you can use in your projects. Each example includes a live demo and the corresponding code.
Examples Included:

Basic Flex Container
Flex Direction (Row and Column)
Justify Content Variations
Align Items Options
Flex Wrap Examples
Flex Grow, Shrink, and Basis
Navigation Bar
Card Layout
Holy Grail Layout
Media Object Pattern
Pricing Table
Form Layout
Flexbox Examples Implementation

Complete Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Flexbox Examples</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f8f9fa;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    header {
      text-align: center;
      margin-bottom: 40px;
      padding: 20px;
      background: linear-gradient(135deg, #6e8efb, #a777e3);
      color: white;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }
    
    h2 {
      font-size: 1.8rem;
      margin: 30px 0 20px;
      color: #2c3e50;
      padding-bottom: 10px;
      border-bottom: 2px solid #eee;
    }
    
    h3 {
      font-size: 1.3rem;
      margin: 20px 0 15px;
      color: #3498db;
    }
    
    .example {
      background: white;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 30px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .demo {
      border: 2px solid #e9ecef;
      border-radius: 6px;
      padding: 20px;
      margin: 15px 0;
      background: #f8f9fa;
    }
    
    .code-block {
      background: #2d2d2d;
      color: #f8f8f2;
      padding: 15px;
      border-radius: 5px;
      overflow-x: auto;
      margin: 15px 0;
      font-family: 'Consolas', 'Monaco', monospace;
      font-size: 0.9rem;
    }
    
    .btn {
      display: inline-block;
      padding: 8px 16px;
      background: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
      margin-right: 10px;
      transition: background 0.3s;
    }
    
    .btn:hover {
      background: #2980b9;
    }
    
    .btn-copy {
      background: #27ae60;
    }
    
    .btn-copy:hover {
      background: #219653;
    }
    
    /* Example 1: Basic Flex Container */
    .flex-container {
      display: flex;
      gap: 10px;
      padding: 15px;
      background: #e3f2fd;
      border-radius: 4px;
    }
    
    .flex-item {
      padding: 15px;
      background: #2196f3;
      color: white;
      border-radius: 4px;
      text-align: center;
    }
    
    /* Example 2: Flex Direction */
    .flex-direction-row {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    .flex-direction-column {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .direction-item {
      padding: 15px;
      background: #4caf50;
      color: white;
      border-radius: 4px;
      text-align: center;
    }
    
    /* Example 3: Justify Content */
    .justify-start {
      display: flex;
      justify-content: flex-start;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #ffecb3;
      border-radius: 4px;
    }
    
    .justify-center {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #ffecb3;
      border-radius: 4px;
    }
    
    .justify-end {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #ffecb3;
      border-radius: 4px;
    }
    
    .justify-between {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #ffecb3;
      border-radius: 4px;
    }
    
    .justify-around {
      display: flex;
      justify-content: space-around;
      gap: 10px;
      padding: 15px;
      background: #ffecb3;
      border-radius: 4px;
    }
    
    .justify-item {
      padding: 15px;
      background: #ff9800;
      color: white;
      border-radius: 4px;
      text-align: center;
    }
    
    /* Example 4: Align Items */
    .align-stretch {
      display: flex;
      align-items: stretch;
      height: 150px;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #e8f5e9;
      border-radius: 4px;
    }
    
    .align-start {
      display: flex;
      align-items: flex-start;
      height: 150px;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #e8f5e9;
      border-radius: 4px;
    }
    
    .align-center {
      display: flex;
      align-items: center;
      height: 150px;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #e8f5e9;
      border-radius: 4px;
    }
    
    .align-end {
      display: flex;
      align-items: flex-end;
      height: 150px;
      gap: 10px;
      padding: 15px;
      background: #e8f5e9;
      border-radius: 4px;
    }
    
    .align-item {
      padding: 15px;
      background: #4caf50;
      color: white;
      border-radius: 4px;
      text-align: center;
    }
    
    .align-item-large {
      padding: 30px 15px;
    }
    
    /* Example 5: Flex Wrap */
    .nowrap {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      margin-bottom: 15px;
      padding: 15px;
      background: #fbe9e7;
      border-radius: 4px;
    }
    
    .wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 15px;
      background: #fbe9e7;
      border-radius: 4px;
    }
    
    .wrap-item {
      padding: 15px;
      background: #ff5722;
      color: white;
      border-radius: 4px;
      text-align: center;
      flex: 1 1 200px;
    }
    
    /* Example 6: Flex Grow, Shrink, Basis */
    .flex-grow-container {
      display: flex;
      gap: 10px;
      padding: 15px;
      background: #e0f7fa;
      border-radius: 4px;
    }
    
    .grow-item {
      padding: 15px;
      background: #00bcd4;
      color: white;
      border-radius: 4px;
      text-align: center;
    }
    
    .grow-1 {
      flex: 1 1 0;
    }
    
    .grow-2 {
      flex: 2 1 0;
    }
    
    .grow-3 {
      flex: 3 1 0;
    }
    
    /* Example 7: Navigation Bar */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 2rem;
      background: #333;
      color: white;
      border-radius: 4px;
    }
    
    .nav-logo {
      font-size: 1.5rem;
      font-weight: bold;
    }
    
    .nav-menu {
      display: flex;
      list-style: none;
      gap: 1.5rem;
    }
    
    .nav-menu a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .nav-menu a:hover {
      color: #3498db;
    }
    
    /* Example 8: Card Layout */
    .card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }
    
    .card {
      flex: 1 1 300px;
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .card-img {
      height: 150px;
      background: #3498db;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    .card-content {
      padding: 20px;
      flex: 1;
    }
    
    .card-footer {
      padding: 15px 20px;
      background: #f8f9fa;
      border-top: 1px solid #eee;
    }
    
    /* Example 9: Holy Grail Layout */
    .holy-grail {
      display: flex;
      flex-direction: column;
      min-height: 400px;
      border: 2px solid #3498db;
      border-radius: 4px;
    }
    
    .hg-header {
      padding: 1rem;
      background: rgba(52, 152, 219, 0.2);
      text-align: center;
    }
    
    .hg-main {
      display: flex;
      flex: 1;
    }
    
    .hg-sidebar {
      flex: 0 0 200px;
      padding: 1rem;
      background: rgba(46, 204, 113, 0.2);
    }
    
    .hg-content {
      flex: 1;
      padding: 1rem;
      background: rgba(241, 196, 15, 0.2);
    }
    
    .hg-ads {
      flex: 0 0 150px;
      padding: 1rem;
      background: rgba(155, 89, 182, 0.2);
    }
    
    .hg-footer {
      padding: 1rem;
      background: rgba(52, 152, 219, 0.2);
      text-align: center;
    }
    
    /* Example 10: Media Object */
    .media {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      background: white;
      border-radius: 4px;
      border: 1px solid #eee;
    }
    
    .media-figure {
      flex: 0 0 100px;
      height: 100px;
      background: #3498db;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    .media-body {
      flex: 1;
    }
    
    /* Example 11: Pricing Table */
    .pricing-table {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    
    .pricing-plan {
      flex: 1 1 250px;
      max-width: 300px;
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .plan-header {
      padding: 1.5rem;
      background: #3498db;
      color: white;
      text-align: center;
    }
    
    .plan-price {
      font-size: 2rem;
      font-weight: bold;
      margin: 10px 0;
    }
    
    .plan-features {
      padding: 1.5rem;
      flex: 1;
    }
    
    .plan-features ul {
      list-style: none;
      padding: 0;
    }
    
    .plan-features li {
      padding: 5px 0;
      border-bottom: 1px solid #eee;
    }
    
    .plan-button {
      padding: 1rem;
      text-align: center;
      background: #f8f9fa;
      border-top: 1px solid #eee;
    }
    
    /* Example 12: Form Layout */
    .form-container {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .form-group {
      flex: 1 1 300px;
    }
    
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    
    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    
    .form-actions {
      flex: 0 0 100%;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1>CSS Flexbox Examples</h1>
      <p>Practical implementations of CSS Flexbox layouts</p>
    </header>
    
    <section class="example">
      <h2>1. Basic Flex Container</h2>
      <p>The most basic flex container with equally spaced items.</p>
      
      <div class="demo">
        <div class="flex-container">
          <div class="flex-item">Item 1</div>
          <div class="flex-item">Item 2</div>
          <div class="flex-item">Item 3</div>
        </div>
      </div>
      
      <div class="code-block">
        .flex-container {
          display: flex;
          gap: 10px;
        }
        
        .flex-item {
          flex: 1; /* Each item will grow equally */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>2. Flex Direction</h2>
      <p>Controlling the direction of flex items.</p>
      
      <div class="demo">
        <h3>Row (default)</h3>
        <div class="flex-direction-row">
          <div class="direction-item">Item 1</div>
          <div class="direction-item">Item 2</div>
          <div class="direction-item">Item 3</div>
        </div>
        
        <h3>Column</h3>
        <div class="flex-direction-column">
          <div class="direction-item">Item 1</div>
          <div class="direction-item">Item 2</div>
          <div class="direction-item">Item 3</div>
        </div>
      </div>
      
      <div class="code-block">
        .flex-direction-row {
          display: flex;
          flex-direction: row; /* Default */
        }
        
        .flex-direction-column {
          display: flex;
          flex-direction: column;
        }
      </div>
    </section>
    
    <section class="example">
      <h2>3. Justify Content</h2>
      <p>Aligning items along the main axis.</p>
      
      <div class="demo">
        <div class="justify-start">
          <div class="justify-item">Item 1</div>
          <div class="justify-item">Item 2</div>
          <div class="justify-item">Item 3</div>
        </div>
        
        <div class="justify-center">
          <div class="justify-item">Item 1</div>
          <div class="justify-item">Item 2</div>
          <div class="justify-item">Item 3</div>
        </div>
        
        <div class="justify-end">
          <div class="justify-item">Item 1</div>
          <div class="justify-item">Item 2</div>
          <div class="justify-item">Item 3</div>
        </div>
        
        <div class="justify-between">
          <div class="justify-item">Item 1</div>
          <div class="justify-item">Item 2</div>
          <div class="justify-item">Item 3</div>
        </div>
        
        <div class="justify-around">
          <div class="justify-item">Item 1</div>
          <div class="justify-item">Item 2</div>
          <div class="justify-item">Item 3</div>
        </div>
      </div>
      
      <div class="code-block">
        .justify-start {
          justify-content: flex-start;
        }
        
        .justify-center {
          justify-content: center;
        }
        
        .justify-end {
          justify-content: flex-end;
        }
        
        .justify-between {
          justify-content: space-between;
        }
        
        .justify-around {
          justify-content: space-around;
        }
      </div>
    </section>
    
    <section class="example">
      <h2>4. Align Items</h2>
      <p>Aligning items along the cross axis.</p>
      
      <div class="demo">
        <div class="align-stretch">
          <div class="align-item">Item 1</div>
          <div class="align-item align-item-large">Item 2</div>
          <div class="align-item">Item 3</div>
        </div>
        
        <div class="align-start">
          <div class="align-item">Item 1</div>
          <div class="align-item align-item-large">Item 2</div>
          <div class="align-item">Item 3</div>
        </div>
        
        <div class="align-center">
          <div class="align-item">Item 1</div>
          <div class="align-item align-item-large">Item 2</div>
          <div class="align-item">Item 3</div>
        </div>
        
        <div class="align-end">
          <div class="align-item">Item 1</div>
          <div class="align-item align-item-large">Item 2</div>
          <div class="align-item">Item 3</div>
        </div>
      </div>
      
      <div class="code-block">
        .align-stretch {
          align-items: stretch; /* Default */
        }
        
        .align-start {
          align-items: flex-start;
        }
        
        .align-center {
          align-items: center;
        }
        
        .align-end {
          align-items: flex-end;
        }
      </div>
    </section>
    
    <section class="example">
      <h2>5. Flex Wrap</h2>
      <p>Controlling how items wrap when there's not enough space.</p>
      
      <div class="demo">
        <h3>No Wrap (default)</h3>
        <div class="nowrap">
          <div class="wrap-item">Item 1</div>
          <div class="wrap-item">Item 2</div>
          <div class="wrap-item">Item 3</div>
          <div class="wrap-item">Item 4</div>
          <div class="wrap-item">Item 5</div>
          <div class="wrap-item">Item 6</div>
        </div>
        
        <h3>Wrap</h3>
        <div class="wrap">
          <div class="wrap-item">Item 1</div>
          <div class="wrap-item">Item 2</div>
          <div class="wrap-item">Item 3</div>
          <div class="wrap-item">Item 4</div>
          <div class="wrap-item">Item 5</div>
          <div class="wrap-item">Item 6</div>
        </div>
      </div>
      
      <div class="code-block">
        .nowrap {
          flex-wrap: nowrap; /* Default */
        }
        
        .wrap {
          flex-wrap: wrap;
        }
        
        .wrap-item {
          flex: 1 1 200px; /* Grow, shrink, with base width of 200px */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>6. Flex Grow, Shrink, and Basis</h2>
      <p>Controlling how items grow, shrink, and their initial size.</p>
      
      <div class="demo">
        <div class="flex-grow-container">
          <div class="grow-item grow-1">flex: 1</div>
          <div class="grow-item grow-2">flex: 2</div>
          <div class="grow-item grow-3">flex: 3</div>
        </div>
      </div>
      
      <div class="code-block">
        .grow-1 {
          flex: 1 1 0; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
        }
        
        .grow-2 {
          flex: 2 1 0; /* flex-grow: 2, flex-shrink: 1, flex-basis: 0 */
        }
        
        .grow-3 {
          flex: 3 1 0; /* flex-grow: 3, flex-shrink: 1, flex-basis: 0 */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>7. Navigation Bar</h2>
      <p>A common use case: creating a responsive navigation bar.</p>
      
      <div class="demo">
        <nav class="navbar">
          <div class="nav-logo">Logo</div>
          <ul class="nav-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
      
      <div class="code-block">
        .navbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        
        .nav-menu {
          display: flex;
          list-style: none;
          gap: 1.5rem;
        }
      </div>
    </section>
    
    <section class="example">
      <h2>8. Card Layout</h2>
      <p>Creating a responsive card layout with consistent heights.</p>
      
      <div class="demo">
        <div class="card-container">
          <div class="card">
            <div class="card-img">Image</div>
            <div class="card-content">
              <h3>Card Title</h3>
              <p>This is a description of the card content.</p>
            </div>
            <div class="card-footer">
              <button>Action</button>
            </div>
          </div>
          
          <div class="card">
            <div class="card-img">Image</div>
            <div class="card-content">
              <h3>Card Title</h3>
              <p>This is a longer description to show how the cards maintain equal height regardless of content length.</p>
            </div>
            <div class="card-footer">
              <button>Action</button>
            </div>
          </div>
          
          <div class="card">
            <div class="card-img">Image</div>
            <div class="card-content">
              <h3>Card Title</h3>
              <p>Short description.</p>
            </div>
            <div class="card-footer">
              <button>Action</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="code-block">
        .card-container {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
        }
        
        .card {
          flex: 1 1 300px; /* Grow, shrink, with base width of 300px */
          display: flex;
          flex-direction: column;
        }
        
        .card-content {
          flex: 1; /* Makes content area grow to fill space */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>9. Holy Grail Layout</h2>
      <p>A classic layout with header, footer, and three columns.</p>
      
      <div class="demo">
        <div class="holy-grail">
          <header class="hg-header">Header</header>
          <main class="hg-main">
            <aside class="hg-sidebar">Sidebar</aside>
            <article class="hg-content">Main Content</article>
            <aside class="hg-ads">Ads</aside>
          </main>
          <footer class="hg-footer">Footer</footer>
        </div>
      </div>
      
      <div class="code-block">
        .holy-grail {
          display: flex;
          flex-direction: column;
          min-height: 400px;
        }
        
        .hg-main {
          display: flex;
          flex: 1; /* Takes remaining space */
        }
        
        .hg-sidebar {
          flex: 0 0 200px; /* Don&apos;t grow, Don&apos;t shrink, fixed width */
        }
        
        .hg-content {
          flex: 1; /* Takes remaining space */
        }
        
        .hg-ads {
          flex: 0 0 150px; /* Don&apos;t grow, Don&apos;t shrink, fixed width */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>10. Media Object</h2>
      <p>A pattern for displaying an image alongside content.</p>
      
      <div class="demo">
        <div class="media">
          <div class="media-figure">Image</div>
          <div class="media-body">
            <h3>Media Object Title</h3>
            <p>This is the media body content. It can contain any type of content and will align properly with the media figure.</p>
          </div>
        </div>
      </div>
      
      <div class="code-block">
        .media {
          display: flex;
          align-items: flex-start;
          gap: 1rem;
        }
        
        .media-figure {
          flex: 0 0 100px; /* Don&apos;t grow, Don&apos;t shrink, fixed width */
        }
        
        .media-body {
          flex: 1; /* Takes remaining space */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>11. Pricing Table</h2>
      <p>A responsive pricing table with featured plan highlighting.</p>
      
      <div class="demo">
        <div class="pricing-table">
          <div class="pricing-plan">
            <div class="plan-header">
              <h3>Basic</h3>
              <div class="plan-price">$10/mo</div>
            </div>
            <div class="plan-features">
              <ul>
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
              </ul>
            </div>
            <div class="plan-button">
              <button>Select Plan</button>
            </div>
          </div>
          
          <div class="pricing-plan" style="transform: scale(1.05); box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
            <div class="plan-header" style="background: #e74c3c;">
              <h3>Pro</h3>
              <div class="plan-price">$20/mo</div>
            </div>
            <div class="plan-features">
              <ul>
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
                <li>Feature 4</li>
              </ul>
            </div>
            <div class="plan-button">
              <button>Select Plan</button>
            </div>
          </div>
          
          <div class="pricing-plan">
            <div class="plan-header">
              <h3>Enterprise</h3>
              <div class="plan-price">$30/mo</div>
            </div>
            <div class="plan-features">
              <ul>
                <li>Feature 1</li>
                <li>Feature 2</li>
                <li>Feature 3</li>
                <li>Feature 4</li>
                <li>Feature 5</li>
              </ul>
            </div>
            <div class="plan-button">
              <button>Select Plan</button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="code-block">
        .pricing-table {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          justify-content: center;
        }
        
        .pricing-plan {
          flex: 1 1 250px; /* Grow, shrink, with base width of 250px */
          max-width: 300px;
          display: flex;
          flex-direction: column;
        }
        
        .plan-features {
          flex: 1; /* Makes features area grow to fill space */
        }
      </div>
    </section>
    
    <section class="example">
      <h2>12. Form Layout</h2>
      <p>A responsive form layout with flexbox.</p>
      
      <div class="demo">
        <form class="form-container">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name">
          </div>
          
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email">
          </div>
          
          <div class="form-group">
            <label for="subject">Subject</label>
            <input type="text" id="subject">
          </div>
          
          <div class="form-group">
            <label for="message">Message</label>
            <textarea id="message" rows="4"></textarea>
          </div>
          
          <div class="form-actions">
            <button type="reset">Reset</button>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
      
      <div class="code-block">
        .form-container {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
        }
        
        .form-group {
          flex: 1 1 300px; /* Grow, shrink, with base width of 300px */
        }
        
        .form-actions {
          flex: 0 0 100%; /* Don&apos;t grow, Don&apos;t shrink, full width */
          display: flex;
          justify-content: flex-end;
          gap: 10px;
        }
      </div>
    </section>
  </div>
</body>
</html>
Key Flexbox Concepts Demonstrated

Container Properties

display: flex - Creates a flex container
flex-direction - Defines the main axis direction
justify-content - Aligns items along the main axis
align-items - Aligns items along the cross axis
flex-wrap - Controls whether items wrap to new lines
gap - Sets spacing between flex items
Item Properties

flex-grow - Defines ability to grow if necessary
flex-shrink - Defines ability to shrink if necessary
flex-basis - Defines default size before remaining space distribution
flex - Shorthand for grow, shrink, and basis
align-self - Overrides container's align-items for specific item
order - Controls order of items within container
Flexbox Best Practices

Do's

Use gap instead of margins for spacing between items
Utilize flex: 1 for items that should fill available space
Set flex-wrap: wrap for responsive layouts
Use flex-direction: column for mobile layouts
Combine with media queries for responsive behavior
Don'ts

Don't use fixed widths on flex items when you want them to be flexible
Avoid using too many nested flex containers
Don't forget to set min-width: 0 on items that might overflow
Avoid using flexbox for one-dimensional layouts when CSS Grid might be better
Don't forget to test in different browsers
Ready to Experiment with Flexbox?

Try these Flexbox examples in our interactive editor. Modify the code, see the results in real-time, and practice implementing Flexbox in your projects.
< Previous Next >