BitWithBite
Full-Stack · Quick Reference
Lesson 9 — Flexbox Layout Cheat Sheet
In one line: Flexbox aligns items along one axis (row or column) — set display:flex on a parent and control its children.
Container Properties
1display: flex. Turns children into flex items.
2justify-content. Aligns items along the main axis.
3align-items. Aligns items along the cross axis.
4flex-direction. row (default) or column.
5gap. Space between items, no margin hacks needed.
Nav Example
.nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Item property: flex: 1
Grows to fill space
justify-content: center
Centers on main axis