PocketPlay
中文

Flexbox Playground

Try every flex container and item property on a live preview, then copy the CSS and HTML.

🔒 Runs in your browser — files never leave your deviceFree · No sign-up

Preview — click an item to edit it

Container

Presets

Selected item

CSS


    

    

      
HTML

        

      

    

  




How to use the Flexbox playground
  1. Set the container properties — direction, wrapping, and the two alignment axes — and watch the preview react.
  2. Click any item in the preview to give it its own grow, shrink, basis, order or align-self.
  3. Copy the CSS and the matching HTML when the layout looks right.
FAQ
What is the difference between justify-content and align-items?
justify-content works along the main axis (horizontal when flex-direction: row), align-items along the cross axis. Switching to column swaps which visual direction each one controls.
When does align-content do anything?
Only when items wrap onto more than one line and the container is taller than those lines need. With flex-wrap: nowrap it has no effect at all.
What should flex-basis be?
auto uses the item's own width or height; a length such as 200px sets a starting size before grow and shrink are applied; 0 makes grow share the whole container so items end up in exact proportions.


  


  

    
    

          
            
            
              CSS Gradient GeneratorHOT
              Build linear, radial and conic CSS gradients visually, then copy the CSS, a Tailwind class or an SVG file.
            
          
          
            
            
              CSS Filter Generator
              Tune blur, brightness, contrast, hue-rotate, drop-shadow and more with live sliders, then copy the CSS filter rule.
            
          
          
            
            
              CSS Animation Generator
              Build @keyframes animations visually with a cubic-bezier easing editor, ready-made effects and a live preview.
            
          
          
            
            
              Box Shadow Generator
              Stack multiple box-shadow layers with live preview, Material elevation and neumorphic presets, then copy the CSS.
            
          
          
            
            
              Border Radius Generator
              Drag eight handles to shape any corner, including organic blob shapes, and copy the border-radius CSS.
            
          
          
            
            
              Color PickerHOT
              Pick any colour with a saturation square, hue and alpha sliders, read HEX/RGB/HSL/HSV/CMYK and check WCAG contrast.
            
          
          
            
            
              Color Converter
              Paste any colour — name, hex, rgb, hsl, hwb, lab, lch, oklch or cmyk — and get every other format instantly.
            
          
          
            
            
              CSS Grid Generator
              Design a CSS Grid visually — set track sizes and gaps, drag to name areas, and copy the container CSS and HTML.
            
          
    

    
All tools →