CSS Flexbox

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Flex Container

Enable flexbox on a parent element:

.container {
  display: flex;
}

Flex Direction

Controls the direction of items:

.container {
  display: flex;
  flex-direction: row;            /* Horizontal (default) */
  flex-direction: row-reverse;    /* Horizontal reversed */
  flex-direction: column;         /* Vertical */
  flex-direction: column-reverse; /* Vertical reversed */
}

Justify Content

Aligns items along the main axis:

.container {
  display: flex;
  justify-content: flex-start;    /* Start (default) */
  justify-content: flex-end;      /* End */
  justify-content: center;        /* Center */
  justify-content: space-between; /* Space between items */
  justify-content: space-around;  /* Space around items */
  justify-content: space-evenly;  /* Equal space */
}

Align Items

Aligns items along the cross axis:

.container {
  display: flex;
  align-items: stretch;           /* Stretch to fill (default) */
  align-items: flex-start;        /* Top */
  align-items: flex-end;          /* Bottom */
  align-items: center;            /* Center */
  align-items: baseline;          /* Align text baselines */
}

Align Content

Aligns multiple lines (when flex-wrap is enabled):

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-content: center;
  align-content: space-between;
}

Flex Wrap

Allows items to wrap to multiple lines:

.container {
  display: flex;
  flex-wrap: nowrap;              /* Single line (default) */
  flex-wrap: wrap;                /* Wrap to multiple lines */
  flex-wrap: wrap-reverse;        /* Wrap reversed */
}

Flex Items

Properties for individual items:

.item {
  flex-grow: 1;       /* How much item should grow */
  flex-shrink: 1;     /* How much item should shrink */
  flex-basis: auto;   /* Initial size */
  flex: 1;            /* Shorthand: grow shrink basis */

  align-self: center; /* Override container's align-items */
  order: 1;           /* Change visual order */
}

Complete Example: Navigation

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

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

.nav-links a:hover {
  color: #3498db;
}

<nav class="nav">
  <div class="nav-logo">MySite</div>
  <ul class="nav-links">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Complete Example: Card Grid

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

.card {
  flex: 1 1 300px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.card-content {
  flex-grow: 1;
}

.card-button {
  align-self: flex-end;
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
}

<div class="card-grid">
  <div class="card">
    <h3>Card 1</h3>
    <p class="card-content">Content here</p>
    <button class="card-button">Click</button>
  </div>
  <div class="card">
    <h3>Card 2</h3>
    <p class="card-content">Longer content that takes more space</p>
    <button class="card-button">Click</button>
  </div>
</div>

Complete Example: Holy Grail Layout

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail-body {
  display: flex;
  flex: 1;
}

.holy-grail-content {
  flex: 1;
  padding: 20px;
}

.holy-grail-sidebar {
  width: 200px;
  padding: 20px;
  background-color: #f5f5f5;
}

.holy-grail-footer {
  padding: 20px;
  background-color: #333;
  color: white;
  text-align: center;
}

<div class="holy-grail">
  <header class="holy-grail-header">
    <h1>Header</h1>
  </header>
  <div class="holy-grail-body">
    <nav class="holy-grail-sidebar">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
    <main class="holy-grail-content">
      <h2>Main Content</h2>
      <p>Content goes here...</p>
    </main>
    <aside class="holy-grail-sidebar">
      <h3>Sidebar</h3>
      <p>Side content</p>
    </aside>
  </div>
  <footer class="holy-grail-footer">
    <p>Footer</p>
  </footer>
</div>

Flexbox Cheat Sheet

Container Properties:
  display: flex
  flex-direction: row | column | row-reverse | column-reverse
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
  align-items: stretch | flex-start | flex-end | center | baseline
  flex-wrap: nowrap | wrap | wrap-reverse

Item Properties:
  flex: grow shrink basis
  align-self: auto | flex-start | flex-end | center | stretch
  order: number

Best Practices

1. Use gap instead of margins — Cleaner spacing
2. Set min-width on flex items — Prevents items from shrinking too small
3. Use flex-wrap for responsive — Items wrap on smaller screens
4. Avoid fixed widths — Let flex handle sizing
5. Test on different screens — Ensure responsiveness

Common Mistakes

1. Not setting display: flex — Items won’t flex
2. Using flex on items, not container — Properties go on parent
3. Forgetting flex-wrap — Items overflow on small screens
4. Not setting min-width — Items shrink too much
5. Using margin for gaps — Gap property is cleaner