Experiment with CSS Flexbox visually
Visually experiment with all CSS Flexbox properties. Change flex-direction, justify-content, align-items, flex-wrap, align-content, and gap in real-time. Add or remove items, see the layout update instantly, and copy the generated CSS code. Perfect for learning Flexbox or quickly prototyping layouts.
CSS Flexbox (Flexible Box Layout) is the most important CSS layout system for modern web design. It handles one-dimensional layouts — arranging items in a row or column with precise control over spacing, alignment, and order. Before Flexbox, centering elements vertically required hacky workarounds. Now it's justify-content: center; align-items: center — done. This playground lets you experiment with all Flexbox properties visually: container properties (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) and item properties (order, flex-grow, flex-shrink, flex-basis, align-self). See the effect of every change instantly and copy the resulting CSS.
Flexbox is for one-dimensional layouts (a row OR a column). Grid is for two-dimensional layouts (rows AND columns simultaneously). Use Flexbox for navbars, card rows, form layouts. Use Grid for page layouts, image galleries, dashboards.
On the container: display: flex; justify-content: center; align-items: center. This centers children both horizontally and vertically — the most common Flexbox use case.
flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. It means the item will grow to fill available space equally with other flex: 1 items. Essential for equal-width columns.
justify-content aligns items along the main axis (horizontal in row direction). align-items aligns along the cross axis (vertical in row direction). Think: justify = main axis, align = cross axis.
By default, flex items try to fit on one line. flex-wrap: wrap allows items to flow to the next line when there's not enough space, creating a responsive grid-like behavior without CSS Grid.