CSS Flexbox Generator Playground

Set flex container options, watch a live preview, and copy clean CSS for your layout.



      

        
        
        
      


      
      
This generator runs entirely in your browser. Nothing is uploaded.

    


    

    

      
How to use this tool

      
Pick your container settings from the menus above. Choose a flex-direction
      to lay items in a row or a column, set justify-content to position items along
      the main axis, and align-items to position them on the cross axis. Turn on
      flex-wrap if you want items to flow onto new lines, set a gap
      in pixels, and change the item count to match your design. The live preview updates instantly,
      and the generated CSS appears below it. When the layout looks right, press Copy CSS
      to grab the code or Download .css to save it as a file.


      
How flexbox layout works

      
.container {
  display: flex;
  flex-direction: row | column;
  flex-wrap: nowrap | wrap;
  justify-content: flex-start | center | space-between | ...;
  align-items: stretch | center | flex-start | ...;
  align-content: stretch | center | space-between | ...;  /* only when wrapping */
  gap: 10px;
}

      
Flexbox is a one-dimensional layout model. The container has a main axis and a
      cross axis. With flex-direction: row the main axis runs left to right,
      so justify-content spaces items horizontally and align-items positions them
      vertically. With flex-direction: column the axes swap. justify-content
      controls spacing along the main axis, while align-items controls alignment on the cross
      axis. align-content only takes effect once items wrap onto more than one line, where it
      spaces those lines as a group. The gap property adds consistent space between items
      without needing margins.


      
A real example

      
Suppose you want a navigation bar where the logo sits on the left and the links sit on the right,
      vertically centered, with a small gap. Set flex-direction: row,
      justify-content: space-between, align-items: center,
      flex-wrap: nowrap, and gap: 10px. The tool produces:

      
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

      
Drop that on your wrapper element, place the logo and link group as its direct children, and the
      bar lays itself out with even edges and centered content.


      
Common questions

      
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, which is perpendicular to the main axis. Switching flex-direction between row and column swaps which one feels horizontal or vertical.

      
When does align-content do anything?
align-content only affects layout when items wrap onto multiple lines, which means flex-wrap must be set to wrap or wrap-reverse and there must be enough items to fill more than one line. With a single line it has no visible effect.

      
Should I use gap or margins between flex items?
The gap property is the modern choice because it spaces items evenly without adding extra space on the outer edges and without margin-collapsing surprises. It is supported in all current major browsers, so it is safe for most projects.

      
Does this flex builder send my settings anywhere?
No. The entire playground runs as plain JavaScript in your browser. Your selections, the preview, and the generated container layout code never leave your device.

      
Can I use the generated CSS in any project?
Yes. The output is standard CSS with no dependencies, so you can paste it into a stylesheet, a style tag, or any framework that accepts plain CSS. Just apply the class to the parent element whose direct children you want to arrange.

    

  


  

    
Related tools