Flexbox in 60 seconds
Flexbox arranges items along one main axis. The container (set display: flex) decides how items are laid out; each item can override with its own properties.
flex-direction— row (default) or column. Defines the main axis.flex-wrap— single-line or multi-line.justify-content— align along the main axis.align-items— align along the cross axis.align-content— align multi-line content (only withwrap).gap— the modern replacement for margin hacks.
When to use Flexbox vs Grid
Flexbox for one-dimensional layouts: a navigation bar, a toolbar, a button row, vertically centering a single element. Grid for two-dimensional layouts: a page layout, a card grid, anything with both rows and columns. You'll often nest them — grid for the page shell, flex inside each card.
Related tools
- Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
- Aspect Ratio Calculator — Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.
- CSS Grid Generator — Visual CSS Grid layout builder. Configure columns, rows, gaps, and named areas. Live preview with copyable CSS output.
- Box Shadow Generator — Visual CSS box-shadow builder. Control offset, blur, spread, color, inset. Multi-layer shadows. Live preview + copyable CSS.
Pillar
Part of Frontend & Design.
Written by Mian Ali Khalid. Last updated 2026-04-25.