git:20260529.7c05904 to git:20261004.4b0ddb9

---

name: flexbox-patterns

description: "Use when reviewing stylesheets, component styles, and responsive behavior related to Apply Flexbox best practices. Check the rendered layout across breakpoints and interaction states before proposing a fix."

metadata:

category: css

priority: medium

difficulty: intermediate

estimatedTime: "20"

source: frontendchecklist.io

---

# Apply Flexbox best practices

Flexbox is one of the most used CSS features, but its unintuitive default values (flex-shrink:1, min-width:auto) cause layout bugs that are hard to diagnose. Understanding the flex shorthand and the min-width:0 fix prevents the most common Flexbox breakage scenarios.

## Quick Reference

- Flexbox is for one-dimensional layouts (a row OR a column)

- Use flex: 1 1 0 (shorthand: flex:1) for equal-width items that fill space

- Add min-width: 0 to flex children when text overflow truncation doesn't work

- Use gap instead of margin for spacing between flex items

## Check

Review this CSS for common Flexbox mistakes: missing min-width:0 on text-containing flex children, using margin instead of gap for spacing, and improper flex shorthand usage.

## Fix

Fix the Flexbox layout issues: add min-width:0 where needed, replace inter-item margins with gap, and correct flex shorthand values.

## Explain

Explain how flex-grow, flex-shrink, and flex-basis work, what the flex shorthand means, and why min-width:0 fixes text overflow in flex layouts.

## Code Review

Review stylesheets, component styles, and responsive states related to Apply Flexbox best practices. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.

---

For full implementation details, code examples, and framework-specific guidance,

see `references/rule.md`.