Flexbox Generator
Generate CSS flexbox layouts
Parameters
Preview
CSS Code
Frequently Asked Questions
How does CSS Flexbox work?
Flexbox is a one-dimensional layout system. Set display: flex on a container, then control child alignment with justify-content (main axis), align-items (cross axis), flex-direction (row/column), and flex-wrap. The generator visualizes all properties.
How do I center an element with Flexbox?
On the parent: display: flex; justify-content: center; align-items: center. This centers the child both horizontally and vertically. It works regardless of the child's size and is the simplest centering method in CSS.
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (horizontal in row, vertical in column). align-items aligns along the cross axis. Values include flex-start, flex-end, center, space-between, space-around, and space-evenly.
How do flex-grow, flex-shrink, and flex-basis work?
flex-grow: how much an item grows relative to siblings (0 = no grow). flex-shrink: how much it shrinks (1 = can shrink). flex-basis: initial size before growing/shrinking. Shorthand: flex: 1 1 0% means grow equally, can shrink, start at 0.
When should I use Flexbox vs Grid?
Flexbox is best for one-dimensional layouts (a row of buttons, a navigation bar, centering). Grid is best for two-dimensional layouts (page layouts, card grids). They can be combined — Grid for the page, Flexbox for components within grid cells.