When should I use Flexbox vs Grid?

Flexbox is for one-dimensional layouts — a row OR a column. Grid is for two-dimensional layouts — rows AND columns simultaneously. Use Flexbox for navbars, centering, button groups, list items. Use Grid for page layouts, image galleries, dashboard widgets. They compose well — Grid for the page skeleton, Flexbox inside each grid cell.

Why doesn't justify-content work the way I expect?

justify-content acts on the MAIN axis (defined by flex-direction). With flex-direction: row, justify-content: center horizontally centers; align-items: center vertically centers. With flex-direction: column, the axes swap — justify-content: center now vertically centers, align-items: center horizontally centers. Always check your flex-direction first.

How do I make items equal width with Flexbox?

Set flex: 1 on each item. That expands to flex: 1 1 0, meaning grow factor 1, shrink factor 1, basis 0 — all items get equal share of available space. If you want minimum content width, use flex: 1 1 auto. For three columns of equal width: parent display: flex, each child flex: 1.

Why are my flex items not wrapping?

Default flex-wrap is nowrap — items shrink to fit instead of wrapping. Add flex-wrap: wrap on the parent. Combined with min-width on children, this gives you responsive grids: parent is { display: flex; flex-wrap: wrap; gap: 16px; }, children are { flex: 1 1 250px } — wraps when items can't be 250px wide.

What's the difference between gap, margin, and padding in Flexbox?

gap (or row-gap / column-gap) adds spacing BETWEEN items only — no margin around the outer edges. margin on items also creates spacing but doubles up at the boundaries. padding on the parent adds inner space without affecting between-item spacing. gap is cleaner and easier to reason about than margins; use it whenever the browser supports it (Safari 14.1+, Chrome 84+ — basically everywhere).

ورقة مرجعية CSS Flexbox

مرجع Flexbox الكامل: خصائص الحاوية، خصائص العنصر، الأنماط الشائعة والمخاطر.

Container properties

Property	Values	Effect
`display`	`flex` / `inline-flex`	Activate flexbox
`flex-direction`	`row` \| `row-reverse` \| `column` \| `column-reverse`	Main axis direction (default: row)
`flex-wrap`	`nowrap` \| `wrap` \| `wrap-reverse`	Allow items to wrap onto multiple lines
`justify-content`	`flex-start` \| `center` \| `flex-end` \| `space-between` \| `space-around` \| `space-evenly`	Distribute along main axis
`align-items`	`stretch` \| `flex-start` \| `center` \| `flex-end` \| `baseline`	Align on cross axis (single line)
`align-content`	Same as `justify-content` values	Distribute multi-line content on cross axis
`gap`	`1rem`, `16px 24px`	Space between items (replaces margins)

Item properties

Property	Values	Effect
`flex-grow`	Number (default 0)	Share of remaining space (1 = take available)
`flex-shrink`	Number (default 1)	How much to shrink if overflow (0 = never)
`flex-basis`	`auto`, `0`, `250px`, `30%`	Initial size before grow/shrink
`flex`	Shorthand: `flex: 1` = `1 1 0`	Combines grow/shrink/basis
`order`	Number (default 0)	Reorder visually without changing DOM
`align-self`	Override `align-items` for one item	Per-item cross-axis alignment

Common patterns

Goal	CSS
Center horizontally + vertically	`display: flex; justify-content: center; align-items: center;`
Sticky footer	Body: `display: flex; flex-direction: column; min-height: 100vh;` Main: `flex: 1`
Equal columns	Parent: `display: flex`; Children: `flex: 1`
Navbar (logo left, links right)	`display: flex; justify-content: space-between; align-items: center;`
Wrap on small screens	`display: flex; flex-wrap: wrap; gap: 1rem;` + child `flex: 1 1 250px`
Push one item to end	That item gets `margin-left: auto`
Reverse visual order	`flex-direction: row-reverse` or `order: -1` on specific item

Browser support & gotchas

• Flexbox itself: 99%+ support (IE11 had a buggy implementation; if you still need IE, use Autoprefixer).
• gap in flexbox: 95%+ (Safari 14.1+ from April 2021). Older Safari needs margin fallback.
• Default min-width of flex items is auto, not 0 — items can overflow if content is wider than the container. Add min-width: 0 on items if text is overflowing.
• Flexbox children must be direct DOM children. Wrapping with extra divs breaks flex behavior.
• Percentage flex-basis doesn't include gap — use flex: 1 1 calc(50% - 0.5rem) for two columns with 1rem gap.

Build flexbox layouts visually with our CSS Flexbox Playground.

CSS Flexbox Cheat Sheet — Complete Reference for Container and Item Properties

CSS Flexbox is the most practical layout tool in web development for one-dimensional arrangements — navigation bars, button groups, card rows, centering a single element in the middle of the screen, or making a sidebar fill the remaining height of a page. Despite being well-supported since 2015, developers still regularly look up the exact syntax for align-content vs align-items, the correct flex shorthand values, or the margin trick for pushing one item to the end of a row. This cheat sheet puts all of it in one place.

How to use this cheat sheet

The reference is organised into four sections: Container properties (the CSS you put on the parent element with display: flex), Item properties (CSS you put on individual child elements), Common layout patterns (complete CSS snippets for the most frequently-needed Flexbox solutions), and Browser support gotchas (the edge cases that cause layout bugs in production). Each entry shows the property name, the values it accepts, and what each value actually does. The Common Patterns section is the most practically useful — it has copy-ready CSS for centering, sticky footer, equal columns, navbar, and responsive wrapping layouts.

The properties developers forget most often

align-content is the most misunderstood Flexbox property — it only applies when flex-wrap: wrap is set AND there are multiple lines of content. On a single-line container, it has no effect, which causes confusion when it seems to do nothing. The flex shorthand (flex: 1) is equivalent to flex: 1 1 0 — grow factor 1, shrink factor 1, basis 0 — and is the correct way to make all children share available space equally. The min-width: 0 gotcha: flex items have a default min-width of auto, which means content that is wider than the available space causes overflow instead of wrapping — add min-width: 0 to flex items containing long text, code blocks, or wide images that need to shrink below their natural size.

Who uses this cheat sheet

Front-end developers use it as a bookmark to look up the exact property-value combination they need without opening MDN or Stack Overflow. Bootcamp students learning CSS layout use it as a reference while completing projects, since the patterns section provides complete solutions for the layouts most commonly assigned in courses. UI engineers at companies standardising on design systems use it when documenting Flexbox-based layout utilities for their component library. Developers who primarily write backend code but occasionally touch frontend use it when layout issues arise and they need a quick reference without getting lost in documentation.

Privacy and data handling

This is a static reference page — no interactive inputs collect data, and nothing is transmitted to any server. Use the linked Flexbox Playground to build and test layouts visually.

الأسئلة الشائعة

When should I use Flexbox vs Grid?: Flexbox is for one-dimensional layouts — a row OR a column. Grid is for two-dimensional layouts — rows AND columns simultaneously. Use Flexbox for navbars, centering, button groups, list items. Use Grid for page layouts, image galleries, dashboard widgets. They compose well — Grid for the page skeleton, Flexbox inside each grid cell.
Why doesn't justify-content work the way I expect?: justify-content acts on the MAIN axis (defined by flex-direction). With flex-direction: row, justify-content: center horizontally centers; align-items: center vertically centers. With flex-direction: column, the axes swap — justify-content: center now vertically centers, align-items: center horizontally centers. Always check your flex-direction first.
How do I make items equal width with Flexbox?: Set flex: 1 on each item. That expands to flex: 1 1 0, meaning grow factor 1, shrink factor 1, basis 0 — all items get equal share of available space. If you want minimum content width, use flex: 1 1 auto. For three columns of equal width: parent display: flex, each child flex: 1.
Why are my flex items not wrapping?: Default flex-wrap is nowrap — items shrink to fit instead of wrapping. Add flex-wrap: wrap on the parent. Combined with min-width on children, this gives you responsive grids: parent is { display: flex; flex-wrap: wrap; gap: 16px; }, children are { flex: 1 1 250px } — wraps when items can't be 250px wide.
What's the difference between gap, margin, and padding in Flexbox?: gap (or row-gap / column-gap) adds spacing BETWEEN items only — no margin around the outer edges. margin on items also creates spacing but doubles up at the boundaries. padding on the parent adds inner space without affecting between-item spacing. gap is cleaner and easier to reason about than margins; use it whenever the browser supports it (Safari 14.1+, Chrome 84+ — basically everywhere).