Flexbox Generator

CSS

  






  
  
A visual CSS flexbox playground. Set direction, justify, align, wrap and gap, watch the live preview, then copy the generated CSS. Free, instant, nothing to install. Flexbox controls one axis of a layout at a time — the row or the column you pick with flex-direction — which makes it the standard choice for navigation bars, button groups, card rows and centering content without floats or manual positioning. Reach for the CSS Grid Generator instead when you need to control rows and columns together.

  





  
Frequently Asked Questions

  
What is CSS flexbox?
Flexbox is a one-dimensional CSS layout for arranging items in a row or column. You make a container with display: flex, then place children along the main axis with justify-content, along the cross axis with align-items, set the direction with flex-direction, allow wrapping with flex-wrap, and add spacing with gap. It's the standard way to build nav bars, button groups and centred content.

  
How do I center a div with flexbox?
Make the parent a flex container and set justify-content: center and align-items: center — that centers the child on both axes. This generator lets you pick those values, see the result live, and copy the exact CSS. It works regardless of the child's size, since flexbox centers based on the available space rather than fixed dimensions.

  
What's the difference between justify-content and align-items?
justify-content positions items along the main axis (horizontal for row, vertical for column); align-items positions them along the cross axis (perpendicular to the main axis). Switching flex-direction to column swaps which axis each controls — the most common point of confusion this visual tool makes clear. In the default row direction, justify-content moves items left and right while align-items moves them up and down.

  
Does the generated CSS work everywhere?
Yes, the generated CSS works everywhere: flexbox is supported in every modern browser (Chrome, Edge, Firefox, Safari) on desktop and mobile. The gap property on flex containers is the newest of these but is now widely supported. Everything runs in your browser and nothing is uploaded.