CSS Flexbox Generator
Build a flexbox layout visually - container and item properties both controllable - with a live preview.
Adjust container properties (direction, wrap, alignment) and item properties (grow, shrink, order) - the layout preview updates live.
Container (parent)
Selected item: item 1 (click a box in the preview to select it)
More Frontend / CSS Tools
View all 20For a grid-based layout instead of flexbox, see the CSS Grid Generator.
What Is Flexbox?
Flexbox is a one-dimensional CSS layout model - a flex container arranges its direct children (flex items) in a row or column, distributing extra space and alignment according to container and item properties.
Why Use This Tool?
Flexbox properties interact in ways that are hard to predict from memory alone (how justify-content and flex-grow combine, for instance) - a live preview shows the actual result immediately.
How to Use It
- Set container properties: direction, wrap, justify-content, align-items.
- Add items and adjust each one's flex-grow, flex-shrink, and order if needed.
- Copy the generated container and item CSS.
Understanding the Result
The output is split into container properties (applied to the flex parent) and item properties (applied to each flex child) - both are needed together for the full layout.
Start From a Layout
The preset buttons set up the layouts people build most often - center a div, a navbar with the logo on the left, a wrapping card grid, a fixed-width sidebar with flexible content, equal columns and a vertical stack. Then click any box in the preview to give it its own flex-grow, flex-basis, align-self or order, and copy both the CSS and the HTML.
Flexbox Cheat Sheet
| Property | Set on | What it does |
|---|---|---|
flex-direction | container | Main axis: row (left to right) or column (top to bottom) |
justify-content | container | Spacing along the main axis: start, center, end, space-between... |
align-items | container | Alignment across the main axis (vertical in a row) |
flex-wrap | container | Lets items move onto new lines instead of shrinking |
gap | container | Space between items, without margins |
flex | item | Shorthand for grow, shrink and basis - flex: 1 means "share the free space equally" |
align-self | item | Overrides align-items for one item |
order | item | Changes the visual order without changing the HTML |
Common Layouts in Three Lines
Center anything: display: flex; justify-content: center; align-items: center; on the parent, with a height set (for example min-height: 100vh).
Navbar with links on the right: display: flex; align-items: center; on the bar and margin-left: auto on the first link, or justify-content: space-between.
Responsive cards: display: flex; flex-wrap: wrap; gap: 16px; on the parent and flex: 1 1 200px on each card - cards are at least 200px wide and fill each row.
Flexbox or CSS Grid?
Use flexbox for one direction at a time - a row of buttons, a navbar, a list of cards that wraps. Use CSS Grid when you need rows and columns to line up together, such as a full page layout or a photo gallery with fixed tracks. They work well together: a Grid page whose header uses flexbox is very common.
Frequently Asked Questions
Explore More Tools
Keep going with related categories and our most used tools.