Flexbox in Practice: Solving Real-World Layout Challenges

Learning theoretical knowledge is important, but the real challenge lies in applying that knowledge to actual projects. Just like learning to drive, you can memorize all the traffic rules, but only by actually getting on the road and facing various real-world situations can you become a qualified driver.

In the previous chapters, we learned various properties of Flexbox. Now, let's see how to use Flexbox to solve real-world layout problems through a series of practical cases. These cases are all distilled from actual projects, and each one has been tested in practice.

Navigation Bar Patterns

Navigation bars are a layout problem that almost every website has to face. Flexbox makes creating various types of navigation bars incredibly simple.

Basic Horizontal Navigation Bar

The most basic navigation bar: Logo on the left, links on the right.

<nav class="navbar">
  <div class="logo">TechCorp</div>
  <ul class="nav-links">
    <li><a href="#home">Home</a></li>
    <li><a href="#products">Products</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* Logo and links at opposite ends */
  align-items: center; /* Vertical centering */
  padding: 15px 40px;
  background-color: #2c3e50;
}

.logo {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: white;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-links a:hover {
  background-color: #34495e;
}

This simple navigation bar uses only two key properties: justify-content: space-between and align-items: center. The Logo and links are automatically separated at both ends, and all elements are vertically centered. No matter how wide the navigation bar is, the layout automatically adapts.

Three-Section Navigation Bar

Many websites need more complex navigation bars: Logo on the left, main navigation in the middle, and user action buttons on the right.

<nav class="navbar-advanced">
  <div class="nav-section nav-left">
    <div class="logo">TechCorp</div>
  </div>

  <div class="nav-section nav-center">
    <ul class="nav-links">
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </div>

  <div class="nav-section nav-right">
    <button class="btn-secondary">Login</button>
    <button class="btn-primary">Sign Up</button>
  </div>
</nav>

.navbar-advanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 40px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-section {
  display: flex;
  align-items: center;
}

.nav-left,
.nav-right {
  flex: 0 1 auto; /* Do not expand, can shrink */
}

.nav-center {
  flex: 1 1 auto; /* Occupy all remaining space in the middle */
  justify-content: center; /* Center navigation links */
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #2196f3;
}

.nav-links {
  display: flex;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: #333;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s;
}

.nav-links a.active,
.nav-links a:hover {
  background-color: #e3f2fd;
  color: #2196f3;
}

.nav-right {
  gap: 15px;
}

.btn-secondary,
.btn-primary {
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.btn-secondary {
  background-color: transparent;
  color: #2196f3;
  border: 1px solid #2196f3;
}

.btn-secondary:hover {
  background-color: #e3f2fd;
}

.btn-primary {
  background-color: #2196f3;
  color: white;
}

.btn-primary:hover {
  background-color: #1976d2;
}

The key point is that the middle part uses flex: 1 to occupy all remaining space, and uses justify-content: center to center the navigation links within this space.

Vertical Sidebar Navigation

For admin dashboards or application interfaces, vertical sidebar navigation is usually required.

<aside class="sidebar-nav">
  <div class="sidebar-header">
    <div class="logo">Dashboard</div>
    <div class="user-info">
      <img src="avatar.jpg" alt="User" class="avatar" />
      <div class="user-details">
        <div class="user-name">Sarah Johnson</div>
        <div class="user-role">Administrator</div>
      </div>
    </div>
  </div>

  <nav class="nav-menu">
    <a href="#" class="nav-item active">
      <span class="icon">🏠</span>
      <span class="label">Dashboard</span>
    </a>
    <a href="#" class="nav-item">
      <span class="icon">📊</span>
      <span class="label">Analytics</span>
    </a>
    <a href="#" class="nav-item">
      <span class="icon">👥</span>
      <span class="label">Users</span>
    </a>
    <a href="#" class="nav-item">
      <span class="icon">⚙️</span>
      <span class="label">Settings</span>
    </a>
  </nav>

  <div class="sidebar-footer">
    <button class="btn-logout">Logout</button>
  </div>
</aside>

.sidebar-nav {
  display: flex;
  flex-direction: column; /* Vertical arrangement */
  width: 280px;
  height: 100vh;
  background-color: #2c3e50;
  color: white;
}

.sidebar-header {
  padding: 25px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #3498db;
}

.user-details {
  flex: 1;
}

.user-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.user-role {
  font-size: 12px;
  color: #95a5a6;
}

.nav-menu {
  flex: 1; /* Occupy all remaining space */
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  overflow-y: auto; /* Allow scrolling if too many items */
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 25px;
  color: white;
  text-decoration: none;
  transition: background-color 0.3s;
  cursor: pointer;
}

.nav-item:hover {
  background-color: #34495e;
}

.nav-item.active {
  background-color: #3498db;
  border-left: 4px solid #2980b9;
}

.icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.label {
  font-weight: 500;
}

.sidebar-footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-logout {
  width: 100%;
  padding: 12px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.btn-logout:hover {
  background-color: #c0392b;
}

The key to this vertical navigation is using flex-direction: column and letting the navigation menu part flex: 1 occupy all remaining space, so that no matter how high the window is, the bottom button will stay at the bottom.

Card Layout Patterns

Card layout is one of the most common patterns in modern web design. Flexbox makes creating flexible card grids simple.

Equal Width Card Grid

The most basic card grid, all cards equal width and height.

<div class="card-grid">
  <div class="card">
    <img src="product1.jpg" alt="Product" class="card-image" />
    <div class="card-content">
      <h3>Wireless Headphones</h3>
      <p>Premium sound quality with active noise cancellation</p>
      <div class="card-footer">
        <span class="price">$299</span>
        <button class="btn-add">Add to Cart</button>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="product2.jpg" alt="Product" class="card-image" />
    <div class="card-content">
      <h3>Smart Watch</h3>
      <p>Track your health and stay connected on the go</p>
      <div class="card-footer">
        <span class="price">$399</span>
        <button class="btn-add">Add to Cart</button>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="product3.jpg" alt="Product" class="card-image" />
    <div class="card-content">
      <h3>Laptop Stand</h3>
      <p>Ergonomic design for better posture and comfort during work</p>
      <div class="card-footer">
        <span class="price">$79</span>
        <button class="btn-add">Add to Cart</button>
      </div>
    </div>
  </div>
</div>

.card-grid {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  gap: 25px;
  padding: 30px;
}

.card {
  flex: 1 1 calc(33.333% - 25px); /* 3 cards per row */
  min-width: 280px; /* Minimum width, ensure readable on small screens */
  display: flex;
  flex-direction: column; /* Card content vertical arrangement */
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

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

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

.card-content {
  flex: 1; /* Occupy remaining space */
  display: flex;
  flex-direction: column;
  padding: 25px;
}

.card-content h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #333;
}

.card-content p {
  flex: 1; /* Description text occupies remaining space */
  margin: 0 0 20px 0;
  color: #666;
  line-height: 1.6;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* Ensure footer at bottom */
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: #2196f3;
}

.btn-add {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.btn-add:hover {
  background-color: #1976d2;
}

Key points of this layout:

1. Use flex-wrap: wrap to allow cards to wrap
2. Each card flex: 1 1 calc(33.333% - 25px) ensures 3 cards per row
3. Set min-width: 280px to ensure cards are not too narrow on small screens
4. Inside the card also use Flexbox, let description text flex: 1 occupy space, button always at bottom

Different Sized Cards

Sometimes we need to highlight certain cards and let them occupy more space.

.card-featured {
  flex: 2 1 calc(66.666% - 25px); /* Occupy 2/3 width */
}

.card-small {
  flex: 1 1 calc(25% - 25px); /* 4 small cards per row */
}

<div class="card-grid">
  <div class="card card-featured">
    <!-- Featured card, occupies more space -->
  </div>
  <div class="card"><!-- Normal card --></div>
  <div class="card"><!-- Normal card --></div>
  <div class="card card-small"><!-- Small card --></div>
  <div class="card card-small"><!-- Small card --></div>
</div>

Form Layout

Flexbox is very suitable for creating various form layouts, from simple login forms to complex multi-column forms.

Inline Form

Search bars, newsletter subscriptions, etc., short forms are usually arranged horizontally.

<form class="inline-form">
  <input type="email" placeholder="Enter your email" class="form-input" />
  <button type="submit" class="form-submit">Subscribe</button>
</form>

.inline-form {
  display: flex;
  gap: 0; /* No gap, let input and button connect closely */
  max-width: 500px;
  margin: 30px auto;
}

.form-input {
  flex: 1; /* Input occupies all remaining space */
  padding: 14px 20px;
  border: 2px solid #e0e0e0;
  border-right: none; /* Remove right border */
  border-radius: 4px 0 0 4px; /* Left rounded corners */
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: #2196f3;
}

.form-submit {
  flex: 0 0 auto; /* No expand no shrink */
  padding: 14px 32px;
  background-color: #2196f3;
  color: white;
  border: 2px solid #2196f3;
  border-radius: 0 4px 4px 0; /* Right rounded corners */
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.3s;
}

.form-submit:hover {
  background-color: #1976d2;
  border-color: #1976d2;
}

Form Field Groups

Complex forms usually need to be organized into multi-column layouts.

<form class="user-form">
  <div class="form-row">
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" required />
    </div>
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" required />
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="email" id="email" required />
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="city">City</label>
      <input type="text" id="city" />
    </div>
    <div class="form-group">
      <label for="state">State</label>
      <input type="text" id="state" />
    </div>
    <div class="form-group">
      <label for="zip">ZIP Code</label>
      <input type="text" id="zip" />
    </div>
  </div>

  <div class="form-actions">
    <button type="button" class="btn-cancel">Cancel</button>
    <button type="submit" class="btn-submit">Submit</button>
  </div>
</form>

.user-form {
  max-width: 800px;
  margin: 40px auto;
  padding: 40px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

.form-group {
  flex: 1; /* All fields share space equally */
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.form-group input {
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #2196f3;
}

.form-actions {
  display: flex;
  justify-content: flex-end; /* Buttons align right */
  gap: 15px;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #e0e0e0;
}

.btn-cancel,
.btn-submit {
  padding: 12px 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
}

.btn-cancel {
  background-color: transparent;
  color: #666;
  border: 2px solid #e0e0e0;
}

.btn-cancel:hover {
  background-color: #f5f5f5;
}

.btn-submit {
  background-color: #2196f3;
  color: white;
}

.btn-submit:hover {
  background-color: #1976d2;
}

Holy Grail Layout

The Holy Grail layout is a classic three-column layout problem: fixed-width left and right sidebars, flexible middle content area, header and footer. Before Flexbox, this layout required complex tricks.

<div class="holy-grail">
  <header class="header">
    <h1>Website Header</h1>
  </header>

  <div class="content-wrapper">
    <nav class="left-sidebar">
      <h3>Navigation</h3>
      <ul>
        <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>

    <main class="main-content">
      <h2>Main Content</h2>
      <p>
        This is the main content area that will expand to fill all available
        space.
      </p>
      <p>It can contain articles, posts, or any primary content.</p>
    </main>

    <aside class="right-sidebar">
      <h3>Sidebar</h3>
      <div class="widget">
        <h4>Recent Posts</h4>
        <ul>
          <li>Post 1</li>
          <li>Post 2</li>
          <li>Post 3</li>
        </ul>
      </div>
    </aside>
  </div>

  <footer class="footer">
    <p>&copy; 2025 TechCorp. All rights reserved.</p>
  </footer>
</div>

.holy-grail {
  display: flex;
  flex-direction: column; /* Vertical arrangement: header, content, footer */
  min-height: 100vh; /* At least occupy full viewport */
}

.header {
  flex: 0 0 auto; /* No expand no shrink */
  background-color: #2c3e50;
  color: white;
  padding: 30px 40px;
}

.header h1 {
  margin: 0;
}

.content-wrapper {
  display: flex;
  flex: 1; /* Occupy all remaining space */
}

.left-sidebar,
.right-sidebar {
  flex: 0 0 250px; /* Fixed width 250px */
  padding: 30px 25px;
}

.left-sidebar {
  background-color: #ecf0f1;
  order: 1; /* Ensure on left */
}

.main-content {
  flex: 1; /* Occupy all remaining space */
  padding: 30px 40px;
  background-color: white;
  order: 2; /* In middle */
}

.right-sidebar {
  background-color: #f8f9fa;
  order: 3; /* On right */
}

.footer {
  flex: 0 0 auto;
  background-color: #34495e;
  color: white;
  padding: 25px 40px;
  text-align: center;
}

.footer p {
  margin: 0;
}

/* Responsive: Stack on small screens */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
  }

  .left-sidebar,
  .right-sidebar,
  .main-content {
    flex: 0 0 auto; /* Cancel fixed width */
    order: initial; /* Reset order */
  }

  /* Adjust order: Content first */
  .main-content {
    order: 1;
  }

  .left-sidebar {
    order: 2;
  }

  .right-sidebar {
    order: 3;
  }
}

Key points of this layout:

1. Outer container flex-direction: column vertically arranges three main parts
2. Middle content area flex: 1 occupies all remaining vertical space
3. Inner container horizontally arranges three columns, middle column flex: 1 occupies all remaining horizontal space
4. On small screens, use flex-direction: column and order to adjust layout

Perfect Centering

Flexbox makes all kinds of centering incredibly simple, which is one of its most popular features.

Centering a Single Element

<div class="center-container">
  <div class="centered-box">
    <h2>Perfect Center</h2>
    <p>This box is perfectly centered both horizontally and vertically.</p>
  </div>
</div>

.center-container {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  min-height: 500px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.centered-box {
  padding: 40px 50px;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 450px;
}

.centered-box h2 {
  margin-top: 0;
  color: #333;
}

It's that simple! Two core lines of code achieve perfect centering.

Centering a Login Form

A common application scenario is a centered login form.

<div class="login-page">
  <div class="login-box">
    <h2>Welcome Back</h2>
    <p class="subtitle">Sign in to continue</p>
    <form class="login-form">
      <div class="input-group">
        <input type="email" placeholder="Email address" required />
      </div>
      <div class="input-group">
        <input type="password" placeholder="Password" required />
      </div>
      <div class="form-options">
        <label class="checkbox-label">
          <input type="checkbox" />
          <span>Remember me</span>
        </label>
        <a href="#" class="forgot-password">Forgot password?</a>
      </div>
      <button type="submit" class="btn-login">Sign In</button>
    </form>
    <div class="signup-link">
      Don't have an account? <a href="#">Sign up</a>
    </div>
  </div>
</div>

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  width: 100%;
  max-width: 420px;
  padding: 45px 40px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.login-box h2 {
  margin: 0 0 8px 0;
  color: #333;
  text-align: center;
  font-size: 28px;
}

.subtitle {
  margin: 0 0 35px 0;
  color: #666;
  text-align: center;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-group input {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.input-group input:focus {
  outline: none;
  border-color: #667eea;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.forgot-password {
  color: #667eea;
  text-decoration: none;
}

.forgot-password:hover {
  text-decoration: underline;
}

.btn-login {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s;
}

.btn-login:hover {
  transform: translateY(-2px);
}

.signup-link {
  margin-top: 25px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.signup-link a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
}

.signup-link a:hover {
  text-decoration: underline;
}

Sticky Footer

Keeping the footer always at the bottom of the page is another classic problem. When content is sparse, the footer should be at the bottom of the viewport; when content is abundant, the footer should be below the content.

<div class="page">
  <header class="page-header">
    <h1>My Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main class="page-content">
    <h2>Welcome</h2>
    <p>This is the main content area.</p>
    <p>
      Even if there's not much content, the footer will stay at the bottom of
      the viewport.
    </p>
  </main>

  <footer class="page-footer">
    <p>&copy; 2025 TechCorp. All rights reserved.</p>
  </footer>
</div>

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Key: minimum height is viewport height */
}

.page-header {
  flex: 0 0 auto; /* No expand no shrink */
  padding: 25px 40px;
  background-color: #2c3e50;
  color: white;
}

.page-header h1 {
  margin: 0 0 15px 0;
}

.page-header nav {
  display: flex;
  gap: 25px;
}

.page-header nav a {
  color: white;
  text-decoration: none;
}

.page-content {
  flex: 1; /* Occupy all remaining space */
  padding: 40px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.page-footer {
  flex: 0 0 auto; /* No expand no shrink */
  padding: 25px 40px;
  background-color: #34495e;
  color: white;
  text-align: center;
}

.page-footer p {
  margin: 0;
}

Key points:

1. Container min-height: 100vh ensures at least full viewport height
2. Header and footer flex: 0 0 auto maintain natural height
3. Main content flex: 1 occupies all remaining space, pushing footer to bottom

Common Problems and Solutions

Problem 1: Flex Item Overflows Container

Problem Description: When a flex item has very long text or image, it might overflow the container.

/* Problem code */
.item {
  flex: 1;
  /* Long text will stretch container */
}

Solution: Add min-width: 0 or overflow: hidden

.item {
  flex: 1;
  min-width: 0; /* Allow item to shrink below content width */
  overflow: hidden; /* Or hide overflow content */
}

.item img {
  max-width: 100%; /* Image not exceed container width */
  height: auto;
}

Problem 2: Vertical Centering Not Working

Problem Description: Set align-items: center but vertical centering does not work.

Reason: Container does not have explicit height.

Solution: Set height for container

.container {
  display: flex;
  align-items: center;
  min-height: 400px; /* Or height: 100vh */
}

Problem 3: Gap Not Supported in Old Browsers

Problem Description: gap property is not supported in some old browsers.

Solution: Use margin as fallback

.container {
  display: flex;
  margin: -10px; /* Negative margin offsets child margin */
}

.item {
  margin: 10px; /* All items have margin */
}

/* Or use feature detection */
@supports (gap: 20px) {
  .container {
    gap: 20px;
    margin: 0;
  }

  .item {
    margin: 0;
  }
}

Best Practices Summary

Based on practical project experience, here are best practices for using Flexbox:

1. Always Start Simple

/* Start basic */
.container {
  display: flex;
}

/* Add progressively as needed */
.container {
  display: flex;
  gap: 20px;
  align-items: center;
}

2. Use Semantic Class Names

/* Good practice */
.navbar,
.card-grid,
.form-actions {
  display: flex;
}

/* Avoid */
.flex-container,
.flex-wrapper {
  display: flex;
}

3. Mobile-First Responsive Design

/* Mobile first */
.container {
  flex-direction: column;
}

/* Then desktop */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

4. Prioritize Flex Shorthand

/* Recommended: Concise and explicit */
.item {
  flex: 1;
}

/* Avoid: Unless precise control is needed */
.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

5. Consider Accessibility

/* Use order cautiously, it affects keyboard navigation */
.item {
  order: 2; /* Ensure logical order is still reasonable */
}

6. Use Gap Instead of Margin (If Possible)

/* Modern approach */
.container {
  display: flex;
  gap: 20px;
}

/* Traditional approach: More complex */
.container {
  display: flex;
  margin: -10px;
}

.item {
  margin: 10px;
}

Summary

Flexbox is widely used in actual projects. Through these cases we learned:

Core Patterns:

• Navigation Bar: Use justify-content: space-between and align-items: center
• Card Layout: Use flex-wrap: wrap and flex: 1 1 calc(...)
• Form: Combine flex: 1 and vertical flex-direction: column
• Holy Grail Layout: Nested Flexbox containers handle complex layouts
• Centering: justify-content: center + align-items: center
• Sticky Footer: min-height: 100vh + flex: 1 in main content area

Key Techniques:

1. Reasonably use flex shorthand to control item size
2. Use gap to simplify spacing control
3. Nested Flexbox containers handle complex layouts
4. Use order to rearrange elements in responsive design
5. Combine media queries to achieve responsive layout

After mastering these practical application patterns, you can solve most layout problems with Flexbox. In the next section, we will learn how to create true responsive designs with Flexbox.