Advertisement
Build CSS flexbox layouts visually. Set direction, wrap, alignment and gap, tune each item's grow, shrink and basis, then copy the CSS, HTML or Tailwind code.
Build flex layouts visually and copy the code.
Or set every option below.
Select an item to edit it
The preview box has a fixed height. Items are at least 64 × 48 px.
Copy and paste directly into your project.
Experiment with CSS flexbox and see every change instantly. Set flex-direction, flex-wrap, justify-content, align-items, align-content and gap on the container, add up to 12 items, and adjust each one's flex-grow, flex-shrink, flex-basis, align-self and order. Only the properties you change are written out. Start from a preset such as center, space between, column or wrap, and copy the CSS, the matching HTML or a Tailwind version.
What you get with CSS Flexbox Generator.
Direction, wrap, alignment and gap on the container; grow, shrink, basis, align-self and order on each item.
See the layout change instantly as you switch options and move sliders.
Only the properties you change are written, so the code stays short.
Copy the styles, the markup, or a Tailwind version.
Follow these steps to get the best results.
Choose a preset or pick the direction, wrap, justify-content and align-items values.
Add or remove items, select one, and change its grow, shrink, basis, align-self or order.
Pick CSS, HTML or Tailwind and paste it into your project.
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}Advertisement
Common questions about CSS Flexbox Generator.
justify-content distributes items along the main axis, which is horizontal for a row and vertical for a column. align-items aligns them on the cross axis, the other direction.
flex-basis is an item's starting size. If there is spare room, flex-grow shares it out. If there is not enough room, flex-shrink decides how much each item gets smaller. This tool writes them together as flex: grow shrink basis.
align-content only spaces out several lines of items, so it needs flex-wrap set to wrap or wrap-reverse. The control is disabled until you turn wrapping on, and it is left out of the code when it would have no effect.
Use flexbox to lay items out in one direction, such as a navigation bar or a row of buttons. Use grid when you need to control rows and columns at the same time.
Yes. The Tailwind tab gives complete markup using classes such as flex-col, justify-between, items-center and gap-[16px], with arbitrary values like grow-[2] and basis-[200px] for items.
Advertisement
Comments
Share feedback, ask questions, or help others use this tool.
Join the discussion
Sign in to comment, reply, and report inappropriate content.