CSS Flexbox Playground
Experiment with flex container properties and item alignments in real time. Perfect for understanding and generating responsive 1D layouts.
Flex Container Properties
Item #1 Properties
Key Flexbox Concepts
Flex-direction determines the main axis (row or column). Justify-content always controls alignment along the main axis, while align-items controls the cross axis.
By default, flex items shrink to fit on a single line (`flex-wrap: nowrap`). Enabling `wrap` allows items to break gracefully into multiple rows.
No more messy negative margins! The CSS `gap` property applies clean uniform spacing strictly between items without affecting edges.
Frequently Asked Questions
When should I use Flexbox instead of CSS Grid?
Use Flexbox when you are designing one-dimensional layouts (a single row or column of items like navbars, badge groups, button bars). Use CSS Grid for two-dimensional page structures with both rows and columns.
What does align-self do?
`align-self` allows an individual flex child to override the container's `align-items` rule. For instance, pinning one button to the bottom while all others remain centered.