CSS Flexbox: Complete Guide for Modern Layouts

CSS Flexbox (Flexible Box Layout) is the most practical layout tool in modern CSS. It solves the problems that plagued developers for years — vertical centering, equal-height columns, distributing space evenly — with a clean, declarative syntax. This guide covers every flexbox property with examples you can adapt directly into your projects. How Flexbox Works: The Mental Model Flexbox operates on two axes: a main axis and a cross axis. By default, the main axis runs horizontally (left to right), and the cross axis runs vertically (top to bottom). When you change flex-direction to column, the axes flip. Every flexbox layout has two types of elements: A flex container — the parent element with display: flex Flex items — the direct children of that container Properties on the container control how items are laid out. Properties on items control how individual items behave within that layout. Flex Container Properties display: flex The starting point for any flexbox layout. This turns an e