Flexbox

Flexbox distributes items along one main axis and aligns them on the cross axis. Set `display: flex`, choose direction with `flex-direction`, and control sizing with `flex` shorthand (grow, shrink, basis).

					.toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.toolbar__grow {
  flex: 1 1 auto;
  min-width: 0; /* allow shrinking below content width */
}
				

`justify-content` aligns on the main axis; `align-items` on the cross axis. `flex-wrap` enables multi-line rows. Default `min-width: auto` prevents flex items from shrinking below content — long text overflow is a classic interview trap.

On interviews: explain axes, the flex shorthand, why items refuse to shrink, and when Grid fits better.

Common pitfalls: Flexbox for two-dimensional track layout; missing min-width: 0 on text-heavy flex children.

The trade-off is simplicity on one axis versus fighting Grid-like behavior with nested flex rows.

Checklist:

• Pick the main axis explicitly.
• Set basis and grow/shrink deliberately.
• Use gap instead of margin hacks.
• Add min-width: 0 when content should shrink.