Experiment with CSS Flexbox properties interactively. Adjust container and child properties to see how flex layout works in real time.
Presets
Container Properties
flex-direction
justify-content
align-items
flex-wrap
Gap
8pxPreview
Click an item to edit its individual flex properties.
Generated CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}