Flexbox Playground
Experiment with CSS Flexbox visually.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Interactive CSS Flexbox playground
CSS Flexbox is one of the most powerful layout systems in modern web development. It allows distributing space and aligning elements within a container flexibly, even when element sizes are unknown or dynamic.
Our playground lets you experiment with all flex container properties: flex-direction, justify-content, align-items, flex-wrap, and gap. You can also configure individual item properties.
The preview updates in real time. You can add and remove items, click any item to edit its properties, and copy the generated CSS code directly to your project.
Frequently asked questions
When should I use Flexbox vs Grid?
Flexbox is ideal for one-dimensional layouts (a single row or column), such as navigation bars, horizontal card lists, or aligning elements within a container. CSS Grid is better for two-dimensional layouts (rows and columns simultaneously), like full page layouts or complex galleries.
What does flex-grow do?
flex-grow defines how much an item can grow to fill the available space in the container. A value of 0 (default) means the item does not grow. If one item has flex-grow: 1 and another has flex-grow: 2, the second will grow twice as much as the first.
Is it compatible with all browsers?
Yes, CSS Flexbox has full support in all modern browsers and has for years. Chrome, Firefox, Safari, Edge, and Opera support it without the need for prefixes. Only Internet Explorer 10-11 had a partial and buggy implementation.
Want to learn more? Read our complete guide →