Flexbox is a CSS layout model that arranges items in rows or columns. It handles alignment, spacing, and sizing flexibly, making responsive layouts easier to build.

justify-content aligns items along the main axis (horizontal for row, vertical for column). align-items aligns along the cross axis (vertical for row, horizontal for column).

Use flex-wrap: wrap when you want items to flow to the next line when they don't fit. Without wrapping, items compress to fit on one line.

flex-grow determines how much an item grows relative to siblings when extra space is available. A value of 1 means the item takes its share; 2 means it takes twice as much.

Gap creates consistent spacing between flex items without affecting outer edges. Unlike margin, gap only appears between items, not outside the first and last items.

Flexbox is one-dimensional (row OR column), great for components. Grid is two-dimensional (rows AND columns), better for page layouts. They work well together.

Set display: flex, justify-content: center, and align-items: center on the container. This centers children both horizontally and vertically.

flex-shrink determines how much an item shrinks relative to siblings when space is tight. A value of 0 prevents shrinking; higher values shrink more.

Yes! Flexbox is ideal for responsive layouts. Use flex-wrap, percentage widths, and media queries to create layouts that adapt to any screen size.

Flexbox is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and IE11 (with some limitations). No vendor prefixes needed for current browsers.

Preview

CSS Code

Direction

Justify Content (Main Axis)

Align Items (Cross Axis)

Flex Wrap

Align Content (Multi-line)

Gap

Item Sizes

Related Tools