Every flexbox property with a live preview, plus CSS and Tailwind output.
align-items only shows its effect when the items differ in size along the cross axis, which is why the preview uses varying heights.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px;
flex flex-row justify-start items-stretch flex-nowrap gap-[12px]
flex-direction decides which way items flow and therefore which axis is the main one. Everything else in flexbox is defined relative to that choice, so start here.
justify-content positions items along the main axis and align-items along the cross axis. Change the direction and watch the two swap roles, which is the thing that confuses most people.
The preview is a real flex container, so what you see is exactly what the CSS produces. Take the plain declaration or the equivalent Tailwind classes.
justify-content works along the main axis, which flex-direction sets, and align-items works along the cross axis. Switch direction from row to column and the two effectively swap, which is the source of most flexbox confusion.
Because with stretch, or with items that are all the same size, there is nothing to align. The preview deliberately uses items of different heights so the effect is visible.
Flexbox for one dimension: a row of buttons, a navigation bar, a card footer. Grid when you need to control rows and columns at the same time, such as a page layout or a gallery.
Without it, items shrink to fit on one line no matter how narrow the container gets. With wrap they move to a new line instead, which is usually what you want on small screens.
Yes, gap in flexbox is supported in every current browser. It replaced the old pattern of negative margins on the container plus margins on each child.
space-around gives each item equal space on both sides, so the gap between two items is double the gap at the edges. space-evenly makes every gap identical, including the edges.
Yes. The Tailwind output uses standard utility classes, with the gap written as an arbitrary value so it matches the pixel figure exactly.
Yes, completely free with no sign-up.
Build grid layouts visually, including responsive auto-fit columns.
Open ToolBuild layered CSS box shadows with a live preview, then copy them as plain CSS or a Tailwind arbitrary value.
Open ToolMinify or beautify CSS with strings and data URIs left intact, and see how much smaller it got.
Open Tool