CSS Flexbox — The Complete Guide

Flexbox (Flexible Box Layout) is one of the most practical CSS layout modules, designed to solve element alignment, arrangement, and space distribution along a single axis. Whether you're a frontend beginner or a seasoned developer, Flexbox is the CSS feature you'll use most often in day-to-day work.

1. Container Properties Reference (Parent Element)

After setting display: flex on the parent, you can use these container properties:

Property	Description	Common Values
flex-direction	Main axis direction	row (default), column, row-reverse, column-reverse
flex-wrap	Wrapping behavior	nowrap (default), wrap, wrap-reverse
justify-content	Main axis alignment	flex-start, center, flex-end, space-between, space-around, space-evenly
align-items	Cross axis alignment	stretch (default), flex-start, center, flex-end, baseline
align-content	Multi-line alignment	flex-start, center, flex-end, space-between, space-around, stretch
gap	Item spacing	10px, 1rem (same for row & column) or 10px 20px (row column)

2. Item Properties Reference (Child Elements)

Property	Description	Common Values
order	Display order	Integer (default 0, lower = earlier)
flex-grow	Grow factor	0 (default), 1 (equal share of remaining space)
flex-shrink	Shrink factor	1 (default), 0 (no shrinking)
flex-basis	Initial size	auto (default), 200px, 30%
flex	Shorthand	1, auto, 0 0 auto
align-self	Individual item alignment	auto, flex-start, center, flex-end, stretch

3. The flex Shorthand Explained

flex is shorthand for flex-grow, flex-shrink, and flex-basis. Remember these common combinations:

/* Most common: distribute remaining space equally */
flex: 1;  /* Equivalent to flex: 1 1 0% */

/* No grow, no shrink, keep original size */
flex: 0 0 auto;  /* or flex: none */

/* Proportional distribution */
flex: 2;  /* Takes 2 shares */
flex: 1;  /* Takes 1 share */

/* Fixed basis + flexible */
flex: 1 1 200px;  /* Starts at 200px, can grow and shrink */
flex: 0 1 300px;  /* Starts at 300px, no grow, can shrink */

4. Common Layout Patterns

1. Responsive Navigation Bar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 64px;
  background: #2b6cb0;
  color: #fff;
}

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

2. Card Grid Layout

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

.card {
  flex: 1 1 300px;  /* Minimum 300px, auto-fill */
  max-width: calc(33.333% - 1rem);
  background: #1a1d2e;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

3. Vertical Centering (The Classic Use Case)

/* Method 1: flex container */
.center-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Method 2: margin auto */
.center-wrapper {
  display: flex;
}
.center-child {
  margin: auto;
}

4. Holy Grail Layout (Header + 3 Columns + Footer)

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

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

.sidebar-left {
  flex: 0 0 200px;
  order: -1;
}

.main-area {
  flex: 1;
}

.sidebar-right {
  flex: 0 0 200px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  .sidebar-left, .sidebar-right {
    flex: 0 0 auto;
  }
}

5. Sticky Footer (Footer Always at Bottom)

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

.page main {
  flex: 1;  /* Fills remaining space, pushing footer to bottom */
}

6. Equal-Height Columns

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

.column {
  flex: 1;  /* All columns automatically equal height */
}

5. Alignment Techniques

Six Ways to Center Content

/* 1. Most common flex approach */
display: flex;
justify-content: center;
align-items: center;

/* 2. Horizontal only */
justify-content: center;

/* 3. Vertical only */
align-items: center;

/* 4. Baseline alignment (text baseline) */
align-items: baseline;

/* 5. space-between (flush to edges) */
justify-content: space-between;

/* 6. space-evenly (fully uniform distribution) */
justify-content: space-evenly;

6. The gap Property

gap is the recommended spacing solution—cleaner than margins and doesn't create extra space at the start or end:

.flex-container {
  display: flex;
  gap: 16px;           /* Row gap = Column gap */
  gap: 16px 8px;       /* Row gap 16px, Column gap 8px */
  row-gap: 16px;       /* Row gap only */
  column-gap: 8px;     /* Column gap only */
}

7. Common Pitfalls & Solutions

• Minimum size issue with flex children: Default flex-shrink: 1 with min-width: auto can cause content overflow. Fix: min-width: 0 or overflow: hidden
• flex-basis vs width: flex-basis takes priority over width in flex space calculations, but the final rendered size is also affected by grow/shrink
• Performance of nested flex: Avoid deeply nested flex containers (more than 3 levels); consider using Grid for intermediate layers
• Percentage height gotcha: Flex children's percentage heights require the parent to have an explicit height. Use min-height: 0 to fix this

8. Recommended Tools

• Flexbox Generator — Visually configure Flex layouts, drag to adjust properties, and export production-ready code

FAQ

Should I use Flexbox or Grid?

Use Flexbox for one-dimensional layouts (a single row or column) and Grid for two-dimensional layouts (rows + columns). In practice, they complement each other: Grid handles page structure, Flexbox handles component-level alignment.

What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. The item can grow, can shrink, and starts at zero size—effectively distributing remaining space equally.