CSS Flexbox Not Working — Common Issues Fix (2026) | Tutorials Logic

Why is Flexbox Not Working?

CSS Flexbox is powerful but has several common pitfalls. When flexbox doesn't behave as expected, it's usually because the flex container isn't set up correctly, properties are applied to the wrong element, or there are conflicting styles overriding your flexbox rules.

Common Symptoms:
Items not aligning correctly • Items not wrapping • Items not centering • Flex items overflowing

Common Causes

Forgetting to add display: flex to the container
Applying flex properties to children instead of the container
Missing flex-wrap: wrap for wrapping items
Not setting a height on the container for vertical centering
Conflicting width/height on flex items

Quick Fix (TL;DR)

Quick Solution

/* ❌ Problem — flex on wrong element */
.child { display: flex; justify-content: center; }

/* ✅ Solution — flex on the CONTAINER */
.container {
  display: flex;
  justify-content: center;  /* horizontal alignment */
  align-items: center;      /* vertical alignment */
  flex-wrap: wrap;          /* allow wrapping */
  gap: 16px;                /* spacing between items */
}

Common Scenarios & Solutions

Scenario 1: Items Not Centering Vertically

Problem

/* ❌ No height — nothing to center within */
.container {
  display: flex;
  align-items: center; /* Has no effect without height! */
}

Solution

/* ✅ Set a height for vertical centering to work */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;    /* Full viewport height */
  /* or */
  min-height: 300px;
}

Scenario 2: Items Not Wrapping

Problem

/* ❌ Default is nowrap — items overflow */
.container {
  display: flex;
  /* flex-wrap defaults to nowrap */
}
.item { width: 200px; } /* Items overflow on small screens */

Solution

/* ✅ Enable wrapping */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.item {
  flex: 1 1 200px; /* grow, shrink, basis */
  /* Items wrap when they can't fit */
}

Scenario 3: Flex Item Taking Full Width

Problem

/* ❌ flex-direction: column makes items full width */
.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Needed to prevent full width! */
}
/* Items stretch to full width by default in column direction */

Solution

/* ✅ Use align-items to control cross-axis sizing */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centers items horizontally */
  /* or */
  align-items: flex-start; /* Left-aligns items */
}

Scenario 4: Space Between Not Working

Solution

/* ✅ justify-content: space-between needs multiple items */
.container {
  display: flex;
  justify-content: space-between;
  /* Needs at least 2 items to show space between */
}

/* ✅ Use gap for consistent spacing */
.container {
  display: flex;
  gap: 16px; /* Modern, clean spacing */
}

Best Practices to Avoid This Error

Apply flex to the container, not children - display:flex goes on the parent
Set a height for vertical centering - align-items needs space to work in
Use flex-wrap: wrap for responsive layouts - Prevents overflow on small screens
Use gap instead of margins - Cleaner spacing without edge cases
Use browser DevTools - Inspect flex containers with the flexbox overlay
Use flex shorthand - flex: 1 1 auto is clearer than separate properties
Test in multiple browsers - Flexbox support varies slightly

Related Issues

Key Takeaways

display: flex must be on the container, not the child elements
Vertical centering with align-items requires the container to have a defined height
flex-wrap: wrap is needed to allow items to wrap to the next line
Use gap instead of margins for spacing between flex items
Use browser DevTools flexbox overlay to visualize and debug flex layouts
flex-direction: column changes the main axis — justify-content and align-items swap roles