Flexbox Preview
Generated CSS
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that gives you powerful tools for distributing space and aligning items inside a container — even when their size is unknown or dynamic. It replaced decades of float-based and table-based layout hacks and is now the go-to tool for navigation bars, toolbars, card rows, centred hero sections, and any component where items sit along a single axis.
This visual flexbox generator lets you experiment with every container property in real time, see how your layout responds as you add or remove items, vary item sizes, and download or copy the clean CSS output ready for your project.
-reverse variants flip the order.space-between is the classic navbar pattern; center works for hero sections.stretch makes all items the same height; center vertically centres items of different heights.wrap lets items flow onto a new line when space runs out. Essential for responsive card grids.All flexbox properties on the container (the parent element) are covered by this generator. Here is the complete reference:
.container {
display: flex; /* or inline-flex */
flex-direction: row; /* row | row-reverse | column | column-reverse */
justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
gap: 16px; /* row-gap and column-gap together */
row-gap: 16px; /* space between rows when wrapping */
column-gap: 16px; /* space between columns */
}
Individual flex items (children of the flex container) can override the container's alignment and control how they grow or shrink. These are not generated by this tool but are essential for production layouts.
.item {
flex-grow: 0; /* How much the item grows to fill available space (default 0) */
flex-shrink: 1; /* How much the item shrinks when space is tight (default 1) */
flex-basis: auto;/* The item's starting size before grow/shrink applies */
flex: 1; /* Shorthand: grow=1, shrink=1, basis=0 — equal width items */
align-self: auto;/* Override align-items for this item only */
order: 0; /* Change visual order without changing DOM order */
}
These are the most frequently used flexbox patterns in real production codebases. Copy and adapt them directly.
/* Perfect centring — both axes */
.centered {
display: flex;
justify-content: center;
align-items: center;
}
/* Navigation bar — logo left, links right */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
}
/* Equal-width columns */
.cols > * { flex: 1; }
.cols {
display: flex;
gap: 24px;
}
/* Sticky footer — push footer to bottom */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main { flex: 1; }
/* Responsive card row that wraps */
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 280px; /* grow, shrink, minimum width */
}
Understanding flexbox requires knowing which axis is which. The main axis runs in the direction of flex-direction. The cross axis is always perpendicular to it. justify-content always controls the main axis; align-items always controls the cross axis. The axes flip when you change flex-direction from row to column.
| flex-direction | Main axis | Cross axis | justify-content controls | align-items controls |
|---|---|---|---|---|
| row (default) | Horizontal → | Vertical ↓ | Horizontal spacing | Vertical alignment |
| row-reverse | Horizontal ← | Vertical ↓ | Horizontal spacing | Vertical alignment |
| column | Vertical ↓ | Horizontal → | Vertical spacing | Horizontal alignment |
| column-reverse | Vertical ↑ | Horizontal → | Vertical spacing | Horizontal alignment |
Flexbox is fully supported in all modern browsers with no vendor prefixes required. The gap property for flexbox (as opposed to Grid) gained universal support in 2021 — use with confidence in all current projects.
| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| display: flex | 29+ | 28+ | 9+ | 12+ |
| flex-wrap | 29+ | 28+ | 9+ | 12+ |
| gap (in flexbox) | 84+ | 63+ | 14.1+ | 84+ |
| align-self | 29+ | 28+ | 9+ | 12+ |
| order | 29+ | 28+ | 9+ | 12+ |
justify-content distributes space along the main axis — horizontal spacing when flex-direction: row. align-items controls alignment on the cross axis — vertical alignment when flex-direction: row. Both axes flip when you switch to flex-direction: column, so justify-content then controls vertical distribution and align-items controls horizontal alignment.
Apply display: flex; justify-content: center; align-items: center; to the parent container. This works regardless of the child's size and is the most reliable centring technique in CSS — replacing older negative-margin and transform hacks. For full-page centring, also add min-height: 100vh to the parent.
Use flexbox for one-dimensional layouts where items flow in a single row or column and content drives sizing. Use CSS Grid for two-dimensional layouts where you define explicit rows AND columns. In practice: flexbox for navigation bars, button groups, form rows, and component internals; Grid for page layouts, card grids, and any layout where both row and column positions matter.
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It means the item will grow to fill available space equally with other flex: 1 siblings. Applying flex: 1 to all children of a flex row creates equal-width columns. flex: 2 on one item makes it twice as wide as flex: 1 siblings.
By default flexbox forces all items onto one line, shrinking them to fit. flex-wrap: wrap allows items to flow onto new lines when they run out of space. This is essential for responsive layouts — combined with flex: 1 1 280px on items, it creates a card grid that automatically reflows from multi-column to single-column on small screens without any media queries.
gap adds space between flex items only — not on the outer edges of the container. This avoids the classic "first/last child extra spacing" problem you get with margin. padding on the container adds inner spacing inside its boundaries. Use gap for spacing between items and padding for the container's inner breathing room.
Apply flex: 1 or flex-grow: 1 to that item. This tells it to expand and fill all available space not claimed by other items. A common pattern for the main content area in a navigation layout: the logo and action buttons have fixed sizes, and the search bar or spacer in the middle has flex: 1.
Use flex-direction: row-reverse or column-reverse to reverse all items visually. To reorder individual items, use the order property on each item — lower values appear first (default is 0). Note that changing visual order with flexbox does not change DOM order, which can cause accessibility issues for keyboard navigation and screen readers if overused.
Flexbox works alongside many other CSS properties. These tools on CSSTools.io help you build complete layouts: