What Is Flexbox?
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model for arranging items in rows or columns. It solves many classic CSS layout challenges — vertical centering, equal-height columns, and distributing space between items — that previously required hacks.
Container Properties
display: flex enables flex on a container. flex-direction sets the main axis (row or column). justify-content aligns items along the main axis. align-items aligns along the cross axis. flex-wrap controls whether items wrap to multiple lines.
Item Properties
flex-grow determines how much an item grows to fill available space. flex-shrink controls how it shrinks when space is limited. flex-basis sets the initial size. The shorthand flex: 1 is equivalent to flex: 1 1 0%.
Common Patterns
Perfect vertical centering: display: flex; align-items: center; justify-content: center. Sticky footer: use a flex column on body with flex: 1 on main. Navigation with logo left and links right: justify-content: space-between.
