Visually configure CSS Flexbox properties. Set direction, wrap, justify, align and gap — preview live and copy the CSS.
Choose flex-direction, flex-wrap, justify-content, align-items and align-content from the dropdowns.
Set the row and column gap values and the container and item dimensions for the live preview.
Click Copy CSS to copy the complete flex container CSS block.
Flexbox (Flexible Box Layout) is a CSS layout model that distributes space and aligns items inside a container along one axis at a time. It is ideal for navigation bars, card rows, centring and any single-direction layout.
justify-content aligns items along the main axis (horizontally in row, vertically in column). align-items aligns items along the cross axis (the opposite direction). Think of justify as horizontal and align as vertical for the default row layout.
flex-wrap controls whether flex items are forced into one line or can wrap to multiple lines. nowrap (default) forces all items into one line. wrap allows items to flow to a new line when they exceed the container width.
align-items applies to each line of flex items individually. align-content applies to the flex lines as a whole within the container — it only has effect when there are multiple lines (i.e. when flex-wrap is wrap).
flex-grow defines how much a flex item should grow relative to siblings when extra space is available in the container. A flex-grow: 2 item takes up twice as much of the extra space as a flex-grow: 1 item.
flex is shorthand for flex-grow, flex-shrink and flex-basis. flex: 1 1 auto means the item can grow, can shrink and has an automatic base size. flex: 1 is shorthand for flex: 1 1 0 — equal-sized growing items.
Apply display: flex; justify-content: center; align-items: center to the parent container. This is the simplest and most reliable way to perfectly centre a child element in both directions.
Flexbox is a one-dimensional layout system designed for rows OR columns at a time. CSS Grid is two-dimensional and controls rows AND columns simultaneously. Use Flexbox for components and Grid for full-page layouts.
Yes. Flexbox is the standard approach for navigation bars. Use display: flex on the nav, justify-content: space-between for logo and links, and flex-wrap: wrap or a media query for the mobile hamburger collapse.
Yes. Flexbox has full support in all modern browsers. No vendor prefixes are needed for standard Flexbox properties in current browser versions.
