CSS Flexbox Generator
1
2
3
4
Advertisement
CSS Flexbox Quick Reference
Flexbox (Flexible Box Layout) is a one-dimensional CSS layout system that distributes space among items in a row or column. It replaced float-based and table-based layout hacks with a clean, predictable model.
Essential Container Properties
- display: flex — activates flexbox; children become flex items
- flex-direction: row (default) | column | row-reverse | column-reverse
- justify-content: main axis — flex-start | center | flex-end | space-between | space-around | space-evenly
- align-items: cross axis — stretch (default) | center | flex-start | flex-end | baseline
- flex-wrap: nowrap (default) | wrap — controls line breaking
- gap: spacing between flex items
Essential Item Properties
- flex: 1 — item grows to fill available space
- align-self: overrides align-items for individual items
- order: visual reordering without changing DOM order
When should I use Flexbox vs CSS Grid?
Flexbox is one-dimensional (row or column). Grid is two-dimensional (rows AND columns). Use Flexbox for: navbars, button groups, centering single items, any single-line layout. Use Grid for: overall page layout, card grids, complex multi-row/column layouts. In practice, mix both — Grid for macro layout, Flexbox for component internals.
How do I vertically center an element with Flexbox?
Apply to the parent: display: flex; align-items: center; justify-content: center;. This centers the child both vertically and horizontally. The container needs a defined height for vertical centering to have effect (height: 100vh for full viewport centering).