Flexbox Playground

Build a flex layout, then copy the exact CSS.

Preview direction, wrapping, spacing, and alignment in one place. Each control updates the live example, explains the property, and outputs clean starter code.

Container controls Change flex-direction, justify-content, align-items, align-content, and gap.
Item controls Tune flex-grow, flex-shrink, flex-basis, and align-self for any item.

Flexbox generator

Use presets for common patterns or adjust each property directly. Inputs are clamped to safe ranges to avoid invalid CSS or empty-state rendering bugs.

Main axis flow for the items.
Enable multiple lines when space runs out.
Distribute items along the main axis.
Align items across the cross axis.
Only affects wrapped multi-line layouts.
Useful when testing vertical alignment.
0px 16px
1 4 items

Selected item

Click any preview item to edit it individually. Item-specific values are also sanitized before generating code.

0 1
0 1
Pixels. Use 0 for content-sized growth.
Overrides container alignment for this item.

Live preview

The container below updates immediately. The labels summarize which axis is acting as the main direction so you can connect the CSS to what you see.

Main axis: horizontal. Cross axis: vertical.
display: flex; gap: 16px; Single-line layout.

Copy-ready output

The CSS includes only the properties represented in the tool. HTML labels use semantic class names so the snippet is easy to adapt into a real component.


          


          

            
            

          

        

      


      

        

          

            
How it works

            
Flexbox lays out direct children of a flex container across a main axis and a cross axis. The tool below explains the most common points of confusion without burying the basics in jargon.

          

        


        

          

            
1. Direction sets the main axis

            
row makes the main axis horizontal. column makes it vertical. Once that changes, justify-content and align-items appear to swap roles because they always follow axis logic, not screen direction.

          

          

            
2. Wrapping adds line control

            
When flex-wrap is nowrap, align-content has no visible effect. It matters only when items form multiple lines and there is extra space between those lines.

          

          

            
3. Item values affect negotiation

            
flex-grow controls how spare space is shared, flex-shrink controls how items compress, and flex-basis is the starting size before that negotiation begins.

          

        

        
Assumptions: generated basis values use pixels, gaps use whole pixels, and the preview reflects modern browser behavior. Rounding is limited to integer pixel values for readability.

      


      

        

          

            
Property quick reference

            
Use this as a fast lookup after testing a layout in the generator.

          

        


        

          

            
justify-content

            
Moves items along the main axis. Great for nav bars, button groups, and distributed rows.

          

          

            
align-items

            
Controls cross-axis alignment for all items at once. Use it when card heights or inline content feel uneven.

          

          

            
align-self

            
Overrides the cross-axis alignment for one item without changing the rest of the group.