CSS Flexbox is the most widely used layout system for arranging elements in rows or columns with flexible sizing. This interactive playground lets you experiment with every Flexbox property (flex-direction, justify-content, align-items, flex-wrap, gap, flex-grow, flex-shrink, and align-self) and see the results in real time with generated CSS code.
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 8px;
Use the control panel to set flex container properties: flex-direction, justify-content, align-items, flex-wrap, align-content, and gap. Add, remove, or configure child items with individual properties: flex-grow, flex-shrink, flex-basis, align-self, and order. The visual playground updates in real time, showing exactly how elements are positioned. The generated CSS code for both the container and items is displayed below, ready to copy.
The Flexbox playground is invaluable for learning CSS Flexbox layout visually, prototyping responsive navigation menus, centering elements both horizontally and vertically, creating card grid layouts that wrap responsively, building form layouts with flexible input widths, designing equal-height columns, creating sticky footers, and debugging alignment issues in existing Flexbox layouts by replicating the configuration.
CSS Flexbox operates on a main axis and cross axis. flex-direction sets the main axis (row or column). justify-content distributes items along the main axis (flex-start, center, space-between, space-around, space-evenly). align-items aligns items on the cross axis. flex-wrap allows items to wrap to new lines. flex-grow determines how extra space is distributed, flex-shrink how items shrink when space is insufficient, and flex-basis the initial size before growing/shrinking.
Flexbox (Flexible Box Layout) is a CSS layout system designed for one-dimensional layouts - arranging items in a row or column. It provides powerful alignment, ordering, and sizing capabilities that make responsive layouts much easier to build.
justify-content aligns items along the main axis (horizontal in row direction, vertical in column direction). align-items aligns items along the cross axis (perpendicular to the main axis).
Use Flexbox for one-dimensional layouts (a single row or column). Use CSS Grid for two-dimensional layouts (rows AND columns simultaneously). In practice, most layouts use both: Grid for the page structure and Flexbox for component-level alignment.
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It means the item can grow to fill available space, can shrink if needed, and starts with no inherent size - effectively distributing space equally among all flex:1 items.
Transform, format, generate, and encode data instantly. Private, fast, and always free.
Browse All Tools