CSS Flexbox Complete Guide: Properties, Alignment & Layouts

The Flexible Box Layout Module (commonly known as CSS Flexbox) revolutionized front-end engineering and UI design. Before Flexbox was standardized by the W3C, web developers relied on fragile CSS hacks—such as float: left, clearfix rules, display: inline-block with vertical-alignment fixes, or rigid absolute positioning—to layout user interfaces.

Flexbox provides a predictable, highly responsive, one-dimensional layout system. It automatically distributes available free space among child items, aligns elements along cross axes, orders elements dynamically without altering HTML source order, and handles responsive layout changes across devices without math calculations.

In this exhaustive developer guide, we will break down the Flexbox mental model, examine every container and item property in detail, dissect the flex sizing math algorithm, construct production-ready layout patterns, and solve stubborn layout bugs.

Interactively experiment with Flexbox alignment properties in real time using our free CSS Flexbox Playground.

1. The Flexbox Mental Model: Axes & Directions

To master Flexbox, you must abandon traditional block/inline thinking and adopt a directional mental model based on two axes: the Main Axis and the Cross Axis.

Unlike traditional CSS block layouts (which strictly flow vertically top-to-bottom), Flexbox orientation is relative to the flex-direction property setting:

• Main Axis: The primary direction along which flex items are placed (defined by flex-direction: row | column).
• Cross Axis: The perpendicular axis running 90 degrees relative to the Main Axis.

 flex-direction: row (Default)
 ┌─────────────────────────────────────────────────────────────┐
 │  Main Axis ───>  (justify-content)                          │
 │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐       │  │ Cross Axis
 │  │ Flex Item 1  │  │ Flex Item 2  │  │ Flex Item 3  │       │  ▼ (align-items)
 │  └──────────────┘  └──────────────┘  └──────────────┘       │
 └─────────────────────────────────────────────────────────────┘

When flex-direction is changed to column, the Main Axis rotates vertically top-to-bottom, and the Cross Axis becomes horizontal left-to-right!

2. Flex Container Properties

Flex container properties control the alignment, direction, wrapping, and spacing of child items.

1. display: flex | inline-flex

• flex: Generates a block-level flex container.
• inline-flex: Generates an inline-level flex container.

2. flex-direction

Defines the direction of the Main Axis:

• row (Default): Left-to-right (in LTR document mode).
• row-reverse: Right-to-left.
• column: Top-to-bottom.
• column-reverse: Bottom-to-top.

3. flex-wrap

Controls whether items wrap onto multiple lines when container width is exceeded:

• nowrap (Default): Forces all flex items onto a single line (shrinking items if necessary).
• wrap: Allows items to wrap onto multiple lines top-to-bottom.
• wrap-reverse: Wraps items onto multiple lines bottom-to-top.

4. justify-content (Main Axis Alignment)

Distributes remaining free space along the Main Axis:

• flex-start (Default): Pack items toward the start edge.
• flex-end: Pack items toward the end edge.
• center: Center items along the main axis.
• space-between: Distribute items evenly; first item at start edge, last item at end edge.
• space-around: Distribute items with equal space around each item.
• space-evenly: Distribute items so spacing between any two adjacent items (and edges) is identical.

5. align-items (Cross Axis Alignment)

Aligns flex items along the Cross Axis within their current flex line:

• stretch (Default): Stretch items to fill the container cross-axis height/width.
• flex-start: Align items at the cross-axis start edge.
• flex-end: Align items at the cross-axis end edge.
• center: Center items along the cross axis.
• baseline: Align items such that their typography baselines match.

6. gap, row-gap, column-gap

Defines explicit gutter spacing between adjacent flex items without introducing outer margin pollution.

3. Flex Item Properties

Flex item properties apply to direct child elements inside a flex container.

| Property | Description | Default | Common Values |

| :--- | :--- | :--- | :--- |

| flex-grow | Proportion of positive free space the item should absorb. | 0 | 1, 2, 0 |

| flex-shrink | Factor by which item shrinks when free space is negative. | 1 | 1, 0 (disable shrink) |

| flex-basis | Initial intrinsic size before free space distribution. | auto | 0, auto, 250px, 30% |

| flex | Shorthand for flex-grow flex-shrink flex-basis | 0 1 auto | flex: 1 (1 1 0%), flex: auto (1 1 auto) |

| align-self | Overrides container align-items for an individual item. | auto | flex-start, center, stretch |

| order | Controls visual display order without altering HTML DOM. | 0 | -1, 1, 99 |

4. Deep-Dive Math: The Flex Sizing Algorithm

Understanding the mathematical calculation behind flex-grow, flex-shrink, and flex-basis enables pixel-perfect layout predictability.

Positive Free Space Calculation (flex-grow)

Suppose a container width is 800px containing two items with flex-basis: 200px (400px total base width).

• Free Space: $800 ext{px} - 400 ext{px} = 400 ext{px}$.
• Item A has flex-grow: 1, Item B has flex-grow: 3 (Total flex-grow sum = 4).
• Item A receives: $rac{1}{4} imes 400 ext{px} = +100 ext{px} ightarrow ext{Final Width: } 300 ext{px}$.
• Item B receives: $rac{3}{4} imes 400 ext{px} = +300 ext{px} ightarrow ext{Final Width: } 500 ext{px}$.

Negative Free Space Calculation (flex-shrink)

When items exceed container dimensions, shrinking is weighted by both flex-shrink AND flex-basis:

$ ext{Shrink Ratio} = ext{Item flex-shrink} imes ext{Item flex-basis}$

Items with larger base dimensions shrink proportionally more, avoiding sudden layout collapse!

5. 10 Production Layout Recipes

1. Perfectly Centered Card / Modal

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

2. Sticky Footer Layout

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

3. Auto-Wrapping Card Grid with Gap

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 300px; /* Min 300px, expands equally */
}

4. Responsive Holy Grail Layout

.layout-body {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.sidebar-left { flex: 0 0 250px; }
.main-feed    { flex: 1 1 400px; }
.sidebar-right { flex: 0 0 250px; }

6. Common Flexbox Bugs & Browser Fixes

1. Text Truncation Ellipsis Failure inside Flex Items

Issue: text-overflow: ellipsis fails inside a flex item, stretching the container beyond parent limits.

Fix: Flex items default to min-width: auto. Override with min-width: 0:

.flex-child-truncated {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. Aspect Ratio Image Distortion

Issue: Images inside flex items stretch vertically out of proportion.

Fix: Set align-self: flex-start or object-fit: cover on the image.

7. Tailwind CSS Utility Mapping Table

| CSS Flexbox Property | Tailwind CSS Class |

| :--- | :--- |

| display: flex | flex |

| flex-direction: column | flex-col |

| justify-content: space-between | justify-between |

| align-items: center | items-center |

| flex: 1 1 0% | flex-1 |

| flex: 1 1 auto | flex-auto |

| gap: 1rem | gap-4 |

Experiment with Flexbox properties interactively in our free CSS Flexbox Generator.