Flexbox Generator
Design CSS flexbox layouts visually. Adjust all flex container and item properties with live preview and copy the ready-to-use CSS code. Free, browser-based.
💻 Developer Tools
Free
Browser-based
Container
flex-direction
flex-wrap
justify-content
align-items
align-content
Items
Number of items
4flex-grow
flex-shrink
flex-basis
gap
CSS Flexbox Essentials
Flexbox is a one-dimensional layout model for distributing space and aligning items along a single axis (row or column). It excels at navigation bars, card rows, centred content, and any layout where items need to share available space dynamically.
Container vs Item Properties
| Property | Applied to | Controls |
|---|---|---|
display: flex | Container | Activates flex context |
flex-direction | Container | Main axis direction |
justify-content | Container | Alignment along main axis |
align-items | Container | Alignment along cross axis |
flex-grow | Item | How much the item expands |
flex-shrink | Item | How much the item contracts |
flex-basis | Item | Default size before growing/shrinking |
The flex Shorthand
flex: grow shrink basis — for example flex: 1 1 auto. The most common values are flex: 1 (equal distribution), flex: none (fixed size), and flex: 0 0 200px (fixed 200px, no grow or shrink).