How To Use Flexbox
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
The mental model
Flexbox is the one-dimensional layout tool CSS should have had since day one. It solves the problems that used to require floats, tables, or absolute positioning: centering a thing vertically, distributing space between elements, making a row of cards behave sensibly when the viewport shrinks. Once flex-direction and justify-content click, 80% of everyday layout work becomes a five-line rule. This guide walks through the core properties in the order they actually matter, shows the patterns you’ll reuse daily, and makes the distinction between flexbox and grid clear enough that you stop reaching for the wrong tool.
flex-direction
Controls how items spread along the main axis. The values you’ll actually use:
justify-content: along the main axis
Controls how items line up on the cross axis. Values:
align-items: along the cross axis
Cards now sit three-up on a desktop, two-up on a tablet, one-up on a phone, with no breakpoints. Flex decides.
flex-wrap
Nested flex is fine and often necessary: the card itself is a column, its body expands, and the footer stays pinned to the bottom of each card in the row.
flex-grow, flex-shrink, flex-basis
Many real layouts mix the two — grid for the page shell, flex for the contents of each cell. They cooperate fine.