CSS Flexbox Complete Guide: Every Property Explained with Examples

CSS Flexbox, formally known as the Flexible Box Layout Module, is a one-dimensional layout system that dramatically simplifies the process of building responsive user interfaces. Before Flexbox, centering elements vertically required hacky tricks involving absolute positioning and negative margins. Distributing space equally among items demanded manual percentage calculations. Flexbox solved all of these problems with a clean, predictable model. By declaring display: flex on a container, you unlock a powerful set of alignment and distribution properties on both the container and its direct children. Flexbox operates along two axes: the main axis runs in the direction flex items are placed, and the cross axis runs perpendicular to it. Understanding this axis model is the key to understanding every Flexbox property, because nearly all of them are described in terms of the main axis or cross axis rather than horizontal or vertical.

Flex Direction and the Main Axis

The flex-direction property defines the main axis and therefore the direction in which flex items are laid out inside the container. The four possible values are row, row-reverse, column, and column-reverse. The default value is row, placing items horizontally from left to right. Setting flex-direction to column stacks items vertically from top to bottom, which is useful for building sidebar navigation menus, card stacks, and form layouts. The row-reverse and column-reverse values reverse the visual order of items without changing the DOM order, which can be useful for accessibility scenarios where screen reader order should differ from visual order. Once you set flex-direction to column, all properties described in terms of the main axis now apply vertically. This mental shift trips up many developers who memorize horizontal examples and then struggle when building vertical layouts.

Justify Content: Distributing Items on the Main Axis

The justify-content property controls how flex items are distributed along the main axis when there is extra space in the container. The flex-start value packs items toward the start of the main axis. The flex-end value packs them toward the end. The center value centers the group of items along the main axis, which is one of the most common uses of Flexbox. The space-between value distributes items with equal space between them but none at the edges. The space-around value adds equal space around each item, resulting in half-sized spaces at the edges. The space-evenly value produces equal space between items and at both edges. This property is the primary tool for controlling horizontal spacing in row-direction containers and vertical spacing in column-direction containers. Choosing the right value eliminates the need for manual margin calculations in most layout scenarios.

Align Items and Align Self: Cross-Axis Alignment

The align-items property controls how flex items are positioned along the cross axis as a group. The stretch value, which is the default, causes items to fill the full cross-axis extent of the container, making all items in a row equal height. The flex-start value aligns items to the start of the cross axis. The flex-end value aligns them to the end. The center value centers all items on the cross axis, enabling the classic vertically centered layout that was impossible with older CSS techniques. The baseline value aligns items so that the baselines of their text content line up, which is useful for navigation bars that mix different font sizes. The align-self property overrides align-items for a single specific item, letting you break one item out of the group alignment without affecting the others.

Flex Grow, Shrink, and Basis: Controlling Item Size

The flex-grow property determines how much a flex item grows relative to the other items when there is extra space available. A value of zero means the item does not grow. A value of one means the item takes a proportional share of the available space. If two items both have flex-grow of one, they each get half the extra space. If one has flex-grow of two and the other has one, the first gets twice as much extra space. The flex-shrink property controls how items shrink when there is not enough space. The flex-basis property sets the initial size of an item before growing or shrinking is calculated, replacing width in row-direction layouts and height in column-direction layouts. The shorthand flex property combines all three: flex: 1 is equivalent to flex-grow: 1, flex-shrink: 1, and flex-basis: 0%, which tells the item to take an equal share of all available space.

Flex Wrap: Creating Multi-Line Flex Containers

By default, flex items all try to fit onto one line and will shrink to do so. Setting flex-wrap to wrap allows items to wrap onto multiple lines when they would otherwise overflow the container. Each wrapped line is treated as its own independent flex line, and the align-content property controls how multiple lines are distributed along the cross axis in the same way that justify-content handles items along the main axis. The combination of flex-wrap: wrap and a fixed flex-basis on each item creates a flexible grid where items fill available rows and the layout adapts naturally to different screen widths without media queries. Setting min-width constraints with flex-wrap is a popular technique for creating responsive card grids where each card has a minimum usable width but expands to fill extra space on wider screens.

Gap, Order, and Practical Flexbox Patterns

The gap property, originally a CSS Grid feature that was later extended to Flexbox, sets consistent spacing between flex items without adding margins to the outermost items. This eliminates the old hack of adding margin to all items then using negative margin on the container to neutralize the edge spacing. The order property changes the visual rendering order of a specific item without altering the DOM structure, enabling creative layouts for different screen sizes. In practice, the most common Flexbox patterns are: centered content using justify-content and align-items both set to center, a navigation bar with a logo on the left and links on the right using justify-content: space-between, an equal-height card row using align-items: stretch with flex-wrap: wrap, and a holy grail layout with a sidebar and main content area using flex-basis and flex-grow values on each region.