100% Private • No tracking100% Client-Side•No data leaves your browser•No accounts•Works offline
Build and visualize CSS flexbox layouts interactively. Adjust every property with live preview and copy the generated CSS or Tailwind classes instantly.
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;
padding: 16px;
}CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model built into every modern browser. Apply display: flex to any element and its direct children become flex items — automatically arranged, aligned, and sized according to the flex rules you set. This tool lets you build and visualize those rules interactively, then copy the generated CSS or Tailwind classes directly into your project.
These properties are set on the parent element (display: flex). They control the layout of all child items.
displayflex-directionflex-wrapjustify-contentalign-itemsalign-contentgapThese properties are set on individual child elements to override or extend container-level rules.
flex-growflex-shrinkflex-basisflexalign-selforderdisplay: flex;
justify-content: center;
align-items: center;Centers a single element — or a group — both horizontally and vertically.
display: flex;
justify-content: space-between;
align-items: center;Logo on the left, nav links on the right. The classic navbar pattern.
.container { display: flex; }
.item { flex: 1; }flex: 1 on each item distributes the full container width equally.
display: flex;
flex-wrap: wrap;
gap: 16px;
.card { flex: 1 1 240px; }Cards wrap to new rows when they can't fit, with a minimum width of 240px.
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout system for arranging items in rows or columns. It excels at distributing space and aligning items — especially when sizes are dynamic or unknown.
Use Flexbox for one-dimensional layouts — navbars, button groups, centering a single element, or arranging items in a single row or column. Use CSS Grid when you need two-dimensional control: rows and columns simultaneously, like page layouts or card grids with fixed row heights.
flex-grow: 1 allows an item to expand and fill any remaining space in the container. If multiple items have flex-grow: 1, the free space is divided equally. If one item has flex-grow: 2 and another has flex-grow: 1, the first item gets twice as much of the free space.
align-items applies within a single flex line, aligning items on the cross axis. align-content only applies when flex-wrap is active and there are multiple lines — it distributes space between those lines.
Yes. Flexbox has full support in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. You can use it safely in production without vendor prefixes for all currently supported browsers.
flex is shorthand for flex-grow, flex-shrink, and flex-basis in one declaration. flex: 1 expands to flex: 1 1 0% — allowing the item to grow and shrink freely from a zero base, making it useful for equal-width columns.
display: flex;
flex-direction: column;
min-height: 100vh;
main { flex: 1; }Pushes the footer to the bottom of the viewport regardless of content height.
display: flex;
align-items: flex-start;
gap: 16px;
.text { flex: 1; }Fixed-width image beside a block of text that fills remaining space.