Flexible Layouts Made Easy with CSS Flexbox

Note: This article was originally published on October 10, 2015. Some information may be outdated.

Flexbox (the Flexible Box Layout Module) simplifies responsive design.
By late 2015 it was supported in all evergreen browsers, replacing many float and table hacks.

---

Core ideas

• Container and items: set display: flex on a parent, then its children become flex items.
• Main axis vs cross axis: direction depends on flex-direction.
• Space distribution and alignment happen with a small set of properties.

---

Essential container properties

• display: flex -- activate Flexbox on the parent.
• flex-direction -- row (default) or column layout.
• flex-wrap -- allow items to wrap onto multiple lines.
• justify-content -- align items on the main axis (flex-start, center, space-between, etc.).
• align-items -- align items on the cross axis (perpendicular to main).
• align-content -- multi‑line cross‑axis spacing (only when wrapping).

---

Essential item properties

• flex -- shorthand for flex-grow flex-shrink flex-basis.
• flex-basis -- preferred size before free space is distributed.
• align-self -- override align-items for a single item.
• order -- change visual order without changing markup.

---

Pattern 1 - Center anything

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

<div class="center">
  <p>Perfectly centred</p>
</div>

---

Pattern 2 - Responsive navbar

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav ul {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

<header class="nav">
  <h1>Logo</h1>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</header>

Items stay in a single row, and spacing adjusts automatically.

---

Pattern 3 - Equal‑height columns

.columns {
  display: flex;
  gap: 1rem;
}

.columns > article {
  flex: 1;        /* all articles share free space equally */
  padding: 1rem;
  background: #f3f3f3;
}

<section class="columns">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
</section>

Each column grows to the same height without extra hacks.

---

Pattern 4 - Simple card grid with wrap

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

.card {
  flex: 1 1 200px; /* grow, shrink, basis */
  background: #fff;
  border: 1px solid #ccc;
}

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

Cards wrap automatically as the viewport shrinks.

---

Browser support

• Chrome, Firefox, Safari, Edge (Chromium) support the final syntax.
• Older IE 10/11 versions use an outdated spec with vendor prefixes; check before dropping floats completely.

---

Further reading

• CSS Tricks “A Guide to Flexbox” - complete reference with visuals.
• MDN flexbox docs - property‑by‑property explanations.

---

Originally published at letanure.dev