CSS Flexbox Generator
Build a flex container visually. Set direction, alignment and gap — watch items rearrange in real time. The most-used CSS flex generator online.
CSS generated is free to use — no attribution required.
How do you use the CSS flex generator?
The controls are split the way flexbox itself is: properties that belong on the container, and properties that belong on the items. Change flex-direction first, because it decides what every alignment property does afterwards, then set justification and alignment. The preview shows real boxes so you can see wrapping and spacing behave as they would in a page.
What is the difference between a flex container and a flex item?
Setting display: flex makes an element a flex container, and its direct children automatically become flex items. The distinction matters because the properties split cleanly between the two and applying one to the wrong element silently does nothing.
Container properties are flex-direction, flex-wrap, justify-content, align-items, align-content and gap. Item properties are flex-grow, flex-shrink, flex-basis, align-self and order. Only direct children are items — flexbox does not reach into grandchildren.
What do flex-direction and flex-wrap do?
flex-direction sets the main axis: row lays items out horizontally, column vertically, and the -reverse variants flip the order. flex-wrap decides whether items are allowed onto a second line instead of being squeezed onto one; the default is nowrap, which is why items shrink below their natural width by default.
The flex-flow shorthand sets both at once, as in flex-flow: row wrap.
How do justify-content and align-items differ?
justify-content distributes items along the main axis; align-items aligns them on the cross axis. The catch is that which physical direction each one affects depends entirely on flex-direction.
In a row, justify-content is horizontal and align-items is vertical. Switch to column and the two swap over. This is why centering something both ways with justify-content: center; align-items: center works regardless of direction, while any other combination needs you to know which axis is which.
What does the flex shorthand actually mean?
flex is shorthand for flex-grow, flex-shrink and flex-basis, and its one-value forms are not intuitive. flex: 1 expands to 1 1 0%, which makes items share the space equally regardless of their content. flex: auto expands to 1 1 auto, which shares out the leftover space but keeps content size as the starting point.
The practical consequence: use flex: 1 for equal-width columns, and flex: auto when wider content should stay wider. Reaching for flex: 1 and wondering why columns ignore their content is one of the most common flexbox surprises.
What is the difference between flex-basis and width?
flex-basis sets an item’s starting size along the main axis before growing and shrinking are applied, and it wins over width in a row layout. In a column layout it sets the starting height instead, which is the part people forget.
Because flex-basis follows the main axis and width is always horizontal, the two are only interchangeable in a row. Prefer flex-basis inside flex containers so the rule keeps working if the direction changes.
Why does my flex item overflow instead of shrinking?
Because flex items have min-width: auto by default, which stops them shrinking below their content’s intrinsic minimum size. A long unbroken string or a wide child will therefore push the item past its container no matter what flex-shrink says.
The fix is min-width: 0 on the flex item — or min-height: 0 in a column layout. This single line resolves the large majority of unexplained flexbox overflow, including text that refuses to truncate with text-overflow: ellipsis inside a flex child.
How do you add spacing between flex items?
Use gap. It spaces items without adding an outer margin, so you no longer need the old pattern of margins on every item plus a negative margin on the container to cancel the edges.
gap in flexbox is supported across all current browsers, so the margin workarounds in older tutorials are obsolete. You can set the two axes separately with row-gap and column-gap when wrapping.
When should you use flexbox instead of CSS grid?
Flexbox is one-dimensional: it lays out along a single axis and lets content decide how much room it takes. Grid is two-dimensional and lets you define rows and columns up front.
Reach for flexbox when the content should drive the layout — navigation bars, toolbars, tag lists, a row of buttons, anything that should wrap naturally. Reach for grid when the layout should drive the content, such as a page skeleton or a card grid with aligned tracks. They compose well: a grid page containing flex components is a normal and healthy structure.
What is the browser compatibility for CSS flexbox?
Flexbox is supported everywhere without prefixes and has been for many years, gap included. The display: -webkit-box and -ms-flexbox syntaxes in older code target browsers that no longer have meaningful usage and can be removed.