CSS Flexbox Cheatsheet
NewFlexbox reference — container/item properties, alignment, and common layout patterns.
Frequently Asked Questions
Why is `justify-content` not centering things vertically in my layout?
This cheatsheet helps with that exact confusion because it separates Main Axis Alignment from Cross Axis Alignment. In a row-direction flex container, `justify-content` works along the horizontal main axis, while vertical centering usually involves `align-items`.
Does it cover item-level properties like `flex-grow`, `flex-shrink`, `flex-basis`, and `align-self`?
Yes. It is not limited to container settings; there is an Item Properties section plus common layout patterns.
Can I search for layout patterns like wrapped rows or split navigation bars?
Yes. Besides the property tabs, the component includes a Common Patterns section, and the search scans example text as well as titles.
What does Show full syntax do on this page?
It swaps terse reminders for the fuller declaration or pattern stored for that card. That is handy when you remember a property name like `flex-flow` but want the full syntax shape back.
Is there a live Flexbox playground here?
No. This particular tool is a copyable reference grid, not a visual layout simulator.