CSS Flexbox Generator — Visual Flexbox Layout Builder

justify-content aligns flex items along the main axis — horizontally for flex-direction: row, vertically for flex-direction: column. align-items aligns items along the cross axis (perpendicular to the main axis) — vertically for a row container, horizontally for a column container. A common mistake: adding justify-content: center to try to vertically center items in a row container. That's what align-items: center does.

flex-grow controls how much a flex item expands into available space relative to its siblings. flex-grow: 1 on one item and flex-grow: 2 on another means the second takes twice as much of the remaining space. flex-grow: 0 (default) means the item does not grow beyond its natural size. The most common use case: a navigation bar where one item has flex-grow: 1 to push everything else to the edges.

By default, flex-wrap is "nowrap" — items stay on one line and shrink or overflow rather than wrapping. Set flex-wrap: wrap to allow items to move to a new line when the container is too narrow. You usually also need a flex-basis on each item (e.g. 280px) to define the target size before wrapping kicks in. Without flex-basis, items won't have a reference size to trigger wrapping.

Set display: flex, justify-content: center, and align-items: center on the container, and make sure the container has an explicit height (or min-height). This is the standard CSS centering pattern — it works for a single item or multiple items.

Flexbox is for one-dimensional layouts — navbars, button groups, card rows, centering content. Grid is for two-dimensional layouts where you control rows and columns simultaneously. Most UIs use both: Grid for the overall page structure and Flexbox inside individual components.

Configure the layout using the visual controls, then click the Tailwind tab in the export panel. It generates the equivalent utility classes — for example flex flex-row justify-between items-center gap-4 — and per-item classes like grow, shrink-0, or self-end. Copy and paste directly into a className attribute.

flex-shrink: 0 prevents a flex item from shrinking below its natural size when the container is too small. The default is 1, meaning all items shrink equally. Setting flex-shrink: 0 is useful for fixed-size elements like logos, avatars, or icons that should never compress regardless of how narrow the container gets.

align-items is set on the flex container and applies to all flex children simultaneously. align-self is set on an individual flex item and overrides the container's align-items value for that specific item only. For example, a container might have align-items: center to center most items vertically, while one item has align-self: flex-end to sit at the bottom of the row. This is useful for hero sections where the text content is centered but a decorative image needs to align to the bottom edge.

gap (formerly grid-gap) adds space between flex items — it applies to the space between items only, not the outer edges of the container. gap: 16px sets equal spacing in both directions. gap: 12px 24px sets row gap (cross-axis) and column gap (main-axis) separately. Gap is now universally supported in all modern browsers and is preferred over using margin on each child because it doesn't require negative margin hacks for the first or last item. Combine with flex-wrap: wrap for responsive card grids where the spacing stays consistent as cards wrap to new rows.

Set the navbar container to display: flex; justify-content: space-between; align-items: center. The logo on the left and the link group on the right will sit at opposite ends of the row automatically. For a nav with a logo in the center, use a three-part structure with CSS grid (1fr auto 1fr) instead of Flexbox. If you want one item to push all others to the right side, give that item margin-right: auto — this causes it to consume all remaining space and push subsequent items to the far right edge.

Yes, and this is a common and recommended pattern. Use CSS Grid for the outer page structure — the header, sidebar, main content, and footer positions. Inside each grid cell, use Flexbox for the component-level layout — centering the content inside a card, distributing links in a navbar, or stacking form fields vertically. The two systems are fully composable: a grid item can be a flex container, and a flex item can be a grid container. Grid controls the large-scale layout; Flexbox handles the small-scale arrangement within each component.