Eric Campbell 5 min read JavaScript

CSS Flexbox: One-Dimensional Layout Guide

Flexbox is a one-dimensional layout system, meaning it handles layout in a single direction at a time—either as a row or a column. This distinguishes it from CSS Grid, which manages two-dimensional...

Key Insights

  • Flexbox excels at one-dimensional layouts (rows or columns), making it ideal for navigation bars, form controls, and component-level layouts where CSS Grid would be overkill
  • The flex shorthand property (flex: 1 instead of flex: 1 1 0%) saves time but understanding flex-grow, flex-shrink, and flex-basis individually prevents layout bugs
  • Setting min-width: 0 on flex items solves 90% of overflow issues—flex items have an implicit min-width: auto that prevents shrinking below content size

Introduction to Flexbox Fundamentals

Flexbox is a one-dimensional layout system, meaning it handles layout in a single direction at a time—either as a row or a column. This distinguishes it from CSS Grid, which manages two-dimensional layouts simultaneously.

The “one-dimensional” concept centers on two axes: the main axis (the direction items flow) and the cross axis (perpendicular to the main axis). When flex-direction: row, the main axis runs horizontally; when flex-direction: column, it runs vertically.

Use flexbox for component-level layouts: navigation menus, button groups, form fields, card internals, and toolbars. Reserve CSS Grid for page-level layouts where you need both row and column control simultaneously. If you’re only arranging items in one direction, flexbox is simpler and more appropriate.

.basic-flex {
  display: flex;
  /* Default behavior:
     - flex-direction: row
     - flex-wrap: nowrap
     - justify-content: flex-start
     - align-items: stretch
  */
}

<div class="basic-flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

By default, flex items line up horizontally, don’t wrap, start from the left, and stretch to fill the container’s height.

Flex Container Properties

The container controls how its children behave. These properties go on the parent element.

display: flex vs display: inline-flex: Use flex for block-level containers (full width) and inline-flex when the container should only be as wide as its content and sit inline with other elements.

flex-direction determines the main axis direction: row (default), row-reverse, column, or column-reverse. Reversing is useful for visual reordering without changing HTML structure.

justify-content aligns items along the main axis: flex-start, flex-end, center, space-between, space-around, space-evenly. This is your go-to for distributing items horizontally in a row or vertically in a column.

align-items aligns items along the cross axis: stretch (default), flex-start, flex-end, center, baseline. Use this for vertical alignment in rows or horizontal alignment in columns.

flex-wrap controls wrapping: nowrap (default), wrap, wrap-reverse. Enable wrapping for responsive card grids or multi-line navigation.

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #333;
}

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

<nav class="navbar">
  <div class="logo">Brand</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

For perfect centering:

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

This centers content both horizontally and vertically—a two-line solution that once required hacks.

Flex Item Properties

These properties apply to the children of a flex container.

flex-grow (default 0): Determines how much an item grows relative to siblings when extra space exists. flex-grow: 1 makes items grow equally; flex-grow: 2 makes one item grow twice as fast.

flex-shrink (default 1): Controls how items shrink when space is limited. Set to 0 to prevent shrinking.

flex-basis (default auto): Sets the initial size before growing or shrinking. Think of it as a preferred width/height.

flex shorthand: flex: <grow> <shrink> <basis>. Common values:

  • flex: 1 → flex: 1 1 0% (grow equally, ignore content width)
  • flex: auto → flex: 1 1 auto (grow equally, respect content width)
  • flex: none → flex: 0 0 auto (don’t grow or shrink)
/* Sidebar layout: 1:3 ratio */
.layout {
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 1;
  background: #f4f4f4;
  padding: 1rem;
}

.main-content {
  flex: 3;
  padding: 1rem;
}

<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="main-content">Main Content</main>
</div>

The sidebar takes 25% of available space, main content takes 75%.

align-self overrides the container’s align-items for individual items: auto, flex-start, flex-end, center, baseline, stretch.

order changes visual order without touching HTML. Default is 0; lower values come first. Use sparingly—it can confuse screen readers.

/* Holy Grail Layout */
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex: none;
  background: #333;
  color: white;
  padding: 1rem;
}

.content-wrapper {
  display: flex;
  flex: 1;
}

.nav, .ads {
  flex: 0 0 200px;
}

.main {
  flex: 1;
  padding: 1rem;
}

Common Layout Patterns

Perfect Centering:

.center-anything {
  display: flex;
  justify-content: center;
  align-items: center;
}

Works for any content size, no absolute positioning or transforms needed.

Equal-Height Columns:

Flex items naturally stretch to equal heights with align-items: stretch (the default). No JavaScript or table hacks required.

Sticky Footer:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
}

footer {
  flex: none;
}

The footer sticks to the bottom even with minimal content.

Responsive Card Grid:

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, minimum 300px */
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
}

Cards wrap automatically when space is tight, maintaining a minimum width.

Practical Real-World Examples

Mobile-First Responsive Navbar:

.responsive-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.responsive-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .responsive-nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .responsive-nav ul {
    flex-direction: row;
    gap: 2rem;
  }
}

Vertical stack on mobile, horizontal on desktop—pure CSS, no JavaScript.

Media Object Pattern (avatar + content):

.comment {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.avatar {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  background: #ccc;
}

.comment-content {
  flex: 1;
  min-width: 0; /* Critical for text overflow */
}

.comment-author {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.comment-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="comment">
  <img src="avatar.jpg" alt="User" class="avatar">
  <div class="comment-content">
    <div class="comment-author">Jane Doe</div>
    <p class="comment-text">This is a comment that might be really long...</p>
  </div>
</div>

The avatar stays fixed width while content fills remaining space.

Common Pitfalls and Best Practices

The min-width: 0 Fix:

Flex items have an implicit min-width: auto, preventing them from shrinking below their content size. This causes overflow in nested flex containers or with long text.

/* Problem: Text overflows */
.flex-item {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Solution: Allow shrinking below content size */
.flex-item {
  flex: 1;
  min-width: 0; /* This is the magic */
  overflow: hidden;
  text-overflow: ellipsis;
}

Margin Auto Trick:

margin: auto in flex containers pushes items apart:

.header {
  display: flex;
  align-items: center;
}

.logo {
  margin-right: auto; /* Pushes everything else to the right */
}

This is cleaner than justify-content: space-between when you only want to separate specific items.

Browser Compatibility:

Flexbox has excellent support (IE11+), but watch for:

  • IE11 has bugs with flex-basis: auto and min-height
  • Use autoprefixer for older browsers
  • Test gap property (older browsers need margins instead)

Performance:

Flexbox is fast, but avoid:

  • Deeply nested flex containers (3-4 levels max)
  • Animating flex properties (animate transform instead)
  • Using flexbox for large grids (use CSS Grid)

Conclusion

Flexbox solves one-dimensional layout problems elegantly. Master these core concepts:

  1. Container properties: justify-content (main axis), align-items (cross axis), flex-wrap
  2. Item properties: flex: 1 for equal distribution, flex: none for fixed size
  3. The min-width: 0 fix for overflow issues

Graduate to CSS Grid when you need simultaneous row and column control—like page layouts with headers, sidebars, and content areas. For navigation bars, form controls, card internals, and component layouts, flexbox is simpler and more appropriate.

Use browser DevTools to visualize flex containers (Chrome/Firefox have excellent flex inspectors). Practice with Flexbox Froggy for interactive learning, and reference CSS-Tricks’ Complete Guide to Flexbox for a comprehensive cheat sheet.

The one-dimensional mental model—main axis and cross axis—unlocks flexbox’s full potential. Stop fighting layout; let flexbox handle it.

Liked this? There's more.

Every week: one practical technique, explained simply, with code you can use immediately.