Question 1

When should I use flexbox vs CSS grid?

Accepted Answer

Use flexbox when your layout is one-dimensional — a row of buttons, a column of cards, a navigation bar. Flexbox is content-driven: items size to their content and distribute available space along one axis. Use CSS grid when your layout is two-dimensional — a dashboard with explicit rows AND columns, a photo gallery with fixed aspect ratios, a magazine-style article layout. Grid is container-driven: you define the tracks explicitly, items fit into named cells. They are complementary, not competitive — most real pages use both: grid for the page-level layout, flexbox inside grid cells for component-level layouts.

Question 2

What does each value of justify-content do?

Accepted Answer

justify-content controls how items are distributed along the MAIN axis (the axis defined by flex-direction). flex-start packs items at the start; center clusters them in the middle; flex-end packs them at the end. The three "space" values handle distribution: space-between puts equal space BETWEEN items (none at the edges); space-around adds half-spacing on the ends; space-evenly distributes space equally both between and around. For a navigation bar with logo-left and menu-right, justify-content: space-between is the classic pattern.

Question 3

Why does align-items: stretch work differently from the other values?

Accepted Answer

stretch is the default — it makes items fill the entire cross-axis dimension. Set explicit width/height on the items to opt out. The other align-items values (start, center, end, baseline) assume items have intrinsic sizes and align them at points along the cross axis. baseline is special: it aligns items so their first text baseline lines up, useful for mixed-size text in a row (e.g. a big heading next to small body copy).

Question 4

How does the gap property work in flexbox?

Accepted Answer

gap sets uniform spacing between items in both directions — and replaces the historical margin-hack pattern (margin-right on every item except the last, or negative-margin tricks on the parent). gap works in modern browsers since Safari 14.1 (2021) for flexbox; before that, gap only worked in CSS grid. In 2026, gap support for flexbox is universal. You can also use row-gap and column-gap independently if you need different vertical and horizontal spacing in a wrapping flex container.

Question 5

Why does my flex-wrap: wrap not work?

Accepted Answer

Three common causes: (1) the container has no explicit width — wrap only triggers when items would exceed the container width. Set a max-width on the container or constrain the parent; (2) the items have no flex-basis — pure flex-grow without a basis still tries to fit on one line. Use flex: 1 1 200px or similar so items have a target minimum width; (3) the container is set to flex-direction: column with insufficient height — wrap only kicks in along the main axis, which in column mode is vertical, so the container needs a constrained height.

Question 6

What is the difference between flex-shrink and flex-basis?

Accepted Answer

flex-basis is the initial size of an item before any growing or shrinking — like width, but specifically for the flex axis. flex-shrink is a factor (default 1) controlling how much the item shrinks below its basis when there is not enough space. flex-grow is the analogous factor for growing above the basis when there is extra space. The shorthand flex: 1 1 0 means "share available space equally, basis at zero" — the canonical pattern for equal-width columns. flex: 0 1 200px means "200px wide; do not grow; shrink if needed."

Question 7

How do I make a sticky footer with flexbox?

Accepted Answer

Set the body or app-root to display: flex with flex-direction: column and min-height: 100vh. Make the main content area flex: 1 — it will expand to fill all available vertical space, pushing the footer to the bottom even when content is short. The header and footer remain at their natural heights. This is the modern replacement for the old "sticky footer" CSS hacks; it works in every browser since 2015.

Question 8

Is the Tailwind output using v3 or v4 syntax?

Accepted Answer

Tailwind v4. The output uses named utilities where they map directly (justify-between, items-center, flex-row, flex-wrap, etc.) and arbitrary-value syntax for gap when the value does not match a Tailwind step (gap-[14px] instead of gap-3.5). Tailwind v4 also natively supports gap with arbitrary px values inline. If you are on v3, the syntax is identical for the named utilities; only the arbitrary-value compilation differs internally — the strings work in both versions.

Question 9

Does this work on older browsers?

Accepted Answer

Yes — flexbox has 99%+ browser support globally. Chrome 29+ (2013), Safari 9+ (2015), Firefox 28+ (2014), Edge 12+, all modern mobile browsers. The gap property in flexbox requires Safari 14.1+ (2021); for older Safari, replace gap with margin hacks (negative margin on parent + matching positive margin on items). For internet-explorer-only audiences, flexbox is partially supported in IE11 with buggy edge cases — most teams have dropped IE11 by 2026 but document a fallback if needed.

Property	Values	Purpose
flex-direction	row · row-reverse · column · column-reverse	Defines the primary axis. Row = horizontal flow (default in LTR). Column = vertical.
justify-content	flex-start · center · flex-end · space-between · space-around · space-evenly	Distributes items along the main axis. space-between is the classic nav-bar pattern.
align-items	flex-start · center · flex-end · stretch · baseline	Aligns items along the cross axis. Stretch (default) makes items fill the cross-axis dimension.
flex-wrap	nowrap · wrap · wrap-reverse	Whether items overflow on one line (nowrap) or wrap to new lines (wrap).
gap	0 to any positive length	Spacing between items. Modern replacement for margin hacks; works in both row and column.
align-content	flex-start · center · flex-end · space-between · space-around · stretch	Aligns wrapped LINES (not items). Only has effect when flex-wrap allows wrapping.

Aspect	Flexbox	CSS Grid
Layout dimension	One-dimensional (row OR column)	Two-dimensional (rows AND columns simultaneously)
Direction	Content-driven; items size to content	Container-driven; you define tracks explicitly
Best for	Navigation bars, button rows, card lists, modal layouts	Page-level layout, image galleries, dashboard panels
Item sizing	Distributes available space with grow/shrink	Tracks set explicitly with fr / minmax / repeat
Browser support	99%+ global (Chrome 29+, Safari 9+, FF 28+, Edge 12+)	98%+ global (Chrome 57+, Safari 10.1+, FF 52+)

Free CSS Flexbox Generator With Live Preview & Tailwind Output

Full Flex Property Set

Live Visual Preview

CSS + Tailwind v4 Output

100% Client-Side

Visualize Flexbox — Stop Memorizing Property Names

Flexbox Property Reference

Flexbox vs CSS Grid — Which to Use When

Six Flexbox Patterns You Will Use Constantly

Related CSS Utilities