CSS Flexbox Playground
Visually build CSS layouts and generate the code instantly.
Flex Container Settings
Live Preview
1
2
3
4
CSS Output
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 10px;
}Mastering Flexbox
Flexible Box Layout (Flexbox) is a CSS layout module that makes it easier to design flexible responsive layout structure without using float or positioning.