What Is Flexbox?
CSS Flexbox, short for "flexible box," is a layout model introduced to solve common alignment problems that had plagued web designers for years. Before Flexbox, centering an element both vertically and horizontally required a mix of absolute positioning, negative margins, and hacks that felt more like guesswork than coding. Flexbox gave us a proper system for distributing space and aligning items along a single axis — either a row or a column.
The key difference from CSS Grid is that Flexbox is one-dimensional. It works along a single axis at a time. You can lay out a row of items perfectly, or a column — but not both simultaneously. For full two-dimensional control, Grid is the right tool. For everything that fits in one dimension, Flexbox is usually the simpler answer.
Flex Container vs Flex Items
Like Grid, Flexbox has two layers: the container and the items inside it. Turn any element into a flex container with display: flex. Every direct child of that container automatically becomes a flex item and starts behaving according to the flex rules.
The magic is that you control alignment and distribution on the container, and the items figure out how to fit together. You don't need to manually calculate widths or margins. The container tells items how to share the available space, and the browser does the math.
Key Flexbox Properties
flex-direction sets the main axis — whether items flow in a row (left to right) or a column (top to bottom). It also has reverse options that flip the order.
justify-content controls alignment along the main axis. It distributes space between items. Options include flex-start (items at the start), flex-end (items at the end), center (all items centered), space-between (items pushed to edges with space in between), and space-around (equal space around each item).
align-items controls alignment along the cross axis — perpendicular to the main axis. In a row layout, this is vertical alignment. Options include stretch (items stretch to fill the container height), center, flex-start, and flex-end.
flex-wrap controls whether items wrap to the next line when they run out of space. By default, flex items try to fit on one line and can shrink to fit. Setting flex-wrap: wrap lets items flow to the next line naturally.
The flex Property: grow, shrink, and basis
The flex shorthand property combines three individual properties that control how each item behaves in the available space. flex-grow determines how much an item expands when there's extra space. flex-shrink determines how much an item shrinks when space is tight. flex-basis sets the ideal size before growing or shrinking.
The most common use is flex: 1, which sets grow to 1, shrink to 1, and basis to 0 — essentially saying "this item should take up equal shares of any available space." Use flex: 1 1 auto and items grow and shrink but start at their content's natural size.
Common Flexbox Patterns
Perfect centering: The poster child of Flexbox. Set the container to display: flex with justify-content: center and align-items: center, and any child inside is perfectly centered both horizontally and vertically. This alone made Flexbox worth adopting.
Navigation bar: Logo on the left, menu items on the right. Use justify-content: space-between on the container. Or flex the menu items with gap to space them evenly without margin hacks.
Card grid that wraps: Set the container to flex-wrap: wrap with each card having flex: 1 1 300px. Cards wrap to the next row and each row is as wide as its content allows. Add a max-width to cards to prevent them from getting too wide on large screens.
Sticky footer: The classic layout challenge. Set the page wrapper to display: flex; flex-direction: column; min-height: 100vh and give the main content flex: 1. The footer naturally pushes to the bottom of the viewport even when content is short.
Flexbox Gotchas and How to Avoid Them
The most common surprise: by default, flex items don't wrap. They shrink to fit. If you have three items that should wrap on small screens, add flex-wrap: wrap. Another common issue: align-items defaults to stretch, which means items in a row layout will all stretch to the height of the tallest item. If you don't want that, set align-items: flex-start.
The gap property (gap) works great for spacing flex items but doesn't add space on the outer edges — only between items. This is usually what you want, but remember it when your design needs outer margins.
Flexbox vs CSS Grid
Think of it this way: Flexbox is for components, Grid is for layouts. A navigation bar, a row of tags, a button group, a card inside a grid cell — these are Flexbox jobs. The overall page structure with rows, columns, and specific positioning — that's Grid's territory. Most modern sites use both. A card grid uses CSS Grid, but the cards themselves might use Flexbox internally to align their title, image, and button.