CSS Flexbox Guide:
Layout, Alignment & Spacing

Flexbox: The Layout Tool That Replaced Floats

Before flexbox, centering a div vertically required table-cell hacks, absolute positioning with negative margins, or prayer. Horizontal layouts used floats with clearfixes that broke in creative ways. Flexbox changed all of that in one CSS module. display: flex on a container turns its children into flexible items that distribute themselves along a main axis (horizontal by default, or vertical with flex-direction: column). The browser handles spacing, alignment, and wrapping. No floats, no clearfixes, no JavaScript layout calculations.

Our flexbox generator lets you configure a flex container and its items visually — choose direction, justification, alignment, wrapping, and gap — and get the CSS instantly. The preview shows exactly how items will arrange. For two-dimensional page layouts, use the CSS Grid Generator instead.

Core Flexbox Properties

flex-direction. Sets the main axis. row (default): items flow left to right. column: items stack top to bottom. Reverse variants (row-reverse, column-reverse) flip the order visually without changing the DOM. Use reverse carefully — screen readers don't read visual order.

justify-content. Controls spacing along the main axis. flex-start: items cluster at the start. center: cluster in the middle. flex-end: cluster at the end. space-between: first item at start, last at end, equal gaps between all. space-around: equal space around each item (half-space at edges). space-evenly: equal space everywhere, including edges. This is the most commonly customized flexbox property — it's the one that makes navigation bars, card grids, and button groups look right.

align-items. Controls alignment along the cross axis (perpendicular to main axis). stretch (default): items fill the container height (or width, if column). center: items center along the cross axis — this is what finally made vertical centering easy. flex-start / flex-end: align to start or end of cross axis. baseline: align items so their text baselines line up — useful when items have different font sizes.

flex-wrap. Determines whether items wrap to a new line when they overflow. nowrap (default): all items stay on one line, potentially overflowing. wrap: items wrap to new lines as needed. Combining flex-wrap with a fixed item width (via flex-basis) creates responsive grids without media queries.

gap. The space between flex items. Replaces the old pattern of margin-right on every item except the last. gap: 16px creates 16px gaps between all items, both horizontally and vertically. Simpler, cleaner, and works correctly when items wrap.

Flex Items: Children That Flex

Flex items have their own properties. flex-grow (default 0): how much an item grows relative to others when extra space is available. flex-shrink (default 1): how much an item shrinks when space is tight. flex-basis (default auto): the starting size before growing or shrinking. The shorthand flex: 1 means flex-grow: 1; flex-shrink: 1; flex-basis: 0 — the item takes equal share of available space. align-self overrides align-items for a single item. order changes visual order (use sparingly — screen readers ignore it).

Flexbox vs. CSS Grid

Flexbox is one-dimensional: it handles either a row OR a column, not both simultaneously. Grid is two-dimensional: rows AND columns. Use flexbox for components — a navigation bar, a row of cards, a centered hero section. Use grid for page layouts — header, sidebar, content, footer arranged in a defined grid. They work together: grid defines the page structure, flexbox handles the components inside each grid area. Neither is "better" — they solve different problems. Our flexbox generator and grid generator complement each other for complete layout control.