HandyTools Hub

CSS Flexbox Generator

Design flexbox layouts visually and copy the CSS

Click an item in the preview to set per-item overrides.

 
 
 
  
How to Use


    

  1. Configure the container — Set display, direction, wrap, justification, and alignment with the dropdowns; the preview updates instantly.
    2. 

  2. Tune the gap — Drag the gap slider to space items evenly without writing margin rules.
    3. 

  3. Adjust the item count — Choose between 3 and 12 demo items to see how your layout behaves as it fills up.
    4. 

  4. Override a single item — Click any item in the preview, then set its flex-grow, flex-shrink, or align-self to break it out of the container’s rules.
    5. 

  5. Copy the CSS — Grab the generated .container and .item-N blocks and paste them into your stylesheet. Default values are omitted, so the output stays clean.
    6. 



Features


    

  • Full container control — display, flex-direction, flex-wrap, justify-content, align-items, align-content, and gap in one place.
    • 

  • Live preview — Every change renders immediately on a demo container with numbered, color-coded items.
    • 

  • Per-item overrides — Select any item to give it its own flex-grow, flex-shrink, or align-self, emitted as a separate .item-N rule.
    • 

  • Clean output — Properties left at their CSS defaults are elided, so you copy only what actually changes the layout.
    • 

  • 100% client-side — Everything runs in your browser; no data ever leaves your device.
    • 



Use Cases


    

  • Navbars and toolbars: Prototype a space-between header with a centered group and check wrapping behavior before touching your codebase.
    • 

  • Holy-grail layouts: Combine flex-grow on a main column with fixed siblings to sketch classic multi-column page structures.
    • 

  • Learning flexbox: Flip one property at a time and watch the preview to build intuition for how the main and cross axes interact.
    • 




Frequently Asked Questions
What is the difference between justify-content and align-items?
justify-content distributes items along the main axis — horizontal in a row layout, vertical in a column layout. align-items positions items on the cross axis, which runs perpendicular to the main axis. If you rotate the layout with flex-direction: column, the two axes effectively swap.
When does align-content have an effect?
align-content only matters when the container wraps items onto multiple lines (flex-wrap: wrap or wrap-reverse) and there is extra space on the cross axis. With a single line of items it does nothing — use align-items for single-line alignment instead.
What do flex-grow and flex-shrink actually control?
flex-grow determines how much of the container's leftover space an item absorbs relative to its siblings: an item with flex-grow: 2 expands twice as much as one with flex-grow: 1. flex-shrink does the opposite when space runs out — higher values shrink more. Set flex-shrink: 0 to keep an item at its natural size.