Web Tools tools.bryantsmith.com

CSS & Layout

Flexbox Playground

Change a flex container and its items, watch the live layout update, then copy the finished CSS. Everything runs in your browser — nothing is sent to a server.

Runs in your browser v1.0.0

Controls

updates live

Container

Item

Live preview

updates as you change
1
2
3
4
5

Click an item in the preview (or use the Item buttons) to edit it.

CSS output


                    

                        
                        
                        
                        
                    

                

            

        

    


    

        

            
How it works

        

        

            

                Every control maps directly to a flex property on the preview. The generated CSS leaves
                out values that already match the initial value — for example flex-direction: row,
                align-items: stretch or a gap of 0 — so the
                copyable output stays minimal. Item overrides are written as .item:nth-child(n)
                rules. Nothing is sent to a server; the optional share link stores the setup in the URL
                fragment, which stays in your browser.
            

        

    




Related tools
  • CSS Transform PlaygroundCombine translate, rotate, scale, skew and transform-origin with a live preview, then copy the CSS.
  • Aspect Ratio CalculatorConvert width and height into a simplified aspect ratio, find a missing dimension from a ratio, and copy a CSS aspect-ratio value.
  • Backdrop Filter GeneratorCreate frosted-glass backdrop-filter and blur effects with a live preview and copyable CSS.
  • Border Radius GeneratorSet uniform or per-corner border radii with a live preview, then copy the CSS — entirely in your browser.
  • Box Shadow GeneratorVisually build single or layered CSS box shadows and copy production-ready CSS — entirely in your browser.
  • Breakpoint TesterPreview your HTML at multiple viewport widths side by side and catch horizontal overflow at each breakpoint.
More CSS & Layout tools