Scanner Tools

CSS Flexbox Generator

Pick a direction, alignment, wrap, and gap. The preview updates live and the matching CSS is ready to copy. No flexbox memorization needed.

Preview

The dashed border is the flex container. Boxes inside are the flex items. With nowrap, items may overflow when there isn't enough room — try wrap to see them flow onto new lines.

Generated CSS 


      

      
      

        

          
            Frequently asked questions
          
          

            

              

                Which flexbox properties can I adjust?
              

              

                You can set
                flex-direction,
                flex-wrap,
                justify-content,
                align-items, and
                gap, plus change the number
                of items, and the preview and generated CSS update live.
              

            

            

              

                What is the difference between justify-content and align-items?
              

              

                justify-content positions
                items along the main axis (the direction set by
                flex-direction), while
                align-items positions them
                along the cross axis — perpendicular to that direction.
              

            

            

              

                Why are my items overflowing instead of wrapping?
              

              

                With nowrap (the default),
                flex items stay on one line and overflow when there isn't enough
                room. Switch flex-wrap to
                wrap to let them flow onto
                new lines.
              

            

            

              

                How do I get the CSS into my project?
              

              

                Click Copy to copy the generated
                display: flex rule, then
                paste it onto your container element. Everything runs in your
                browser.
              

            

          

        

      


      
      

        

          Related tools