Flexbox

In the modern era of web development, creating responsive and flexible layouts is a fundamental skill. Flexbox, or the Flexible Box Module, is a one-dimensional layout system. Unlike CSS Grid, which manages both rows and columns (bi-dimensional), Flexbox focuses on distributing space along a single axis at a time either a row or a column.

By mastering Flexbox, you can move away from legacy hacks like float, clearfix, and display: table, allowing your elements to "flex" and fill available space based on intelligent rules.


1. Browser Support & Fundamentals

As of 2026, Flexbox is universally supported by over 99% of global users. While it gained massive traction around 2018, it is now considered a "standard" technology that works seamlessly across all modern browsers, including older versions like IE10+.

Enabling Flexbox

To start using Flexbox, you must define a Flex Container. Any direct children of this container automatically become Flex Items.

Code Block Loading...

2. The Container Properties

The parent container dictates the high-level flow of the items. Let's look at the primary properties that control the layout environment.

2.1 Direction and Flow

The flex-direction property defines the "Main Axis" of your layout.

  • row (Default): Items align left-to-right.
  • row-reverse: Items align right-to-left.
  • column: Items align top-to-bottom.
  • column-reverse: Items align bottom-to-top.

2.2 Alignment: Horizontal and Vertical

Flexbox uses justify-content for the main axis (usually horizontal) and align-items for the cross axis (usually vertical).

Interactive Alignment Demo

3. Handling Multi-Line Layouts (Wrap)

By default, Flexbox tries to fit all items on one line. This can lead to shrinking. To allow items to break into new lines, use flex-wrap.

  • nowrap (Default): Everything stays on one line.
  • wrap: Items wrap onto multiple lines.
  • Shorthand: flex-flow: row wrap; combines direction and wrap.

4. Item-Specific Properties

Sometimes, you want a specific child to behave differently than its siblings.

4.1 Order

By default, all items have an order: 0. You can move an item to the front by giving it a negative number (e.g., -1) or to the back with a higher number.

4.2 Align-Self

An individual item can override the container's align-items value using align-self.

4.3 Sizing: Grow, Shrink, and Basis

These three properties control how items occupy space:

  1. flex-grow: Defines the ability for an item to grow if necessary. If all items have 1 and one has 2, the latter takes double the available space.
  2. flex-shrink: Defines the ability for an item to shrink if there isn't enough space.
  3. flex-basis: Defines the default size of an element before the remaining space is distributed.

Shorthand Syntax: flex: [grow] [shrink] [basis]; (e.g., flex: 0 1 auto;)

Interactive Item Control Demo

Key Takeaways

  • One-Dimensional: Flexbox handles layout in a single direction (row or column) at a time.
  • Container vs. Items: Properties like justify-content and align-items go on the parent; flex-grow and order go on the children.
  • Main Axis vs. Cross Axis: Understanding that justify-content always follows the flex-direction is the secret to mastering alignment.
  • Flexible Sizing: Use the flex shorthand (grow shrink basis) to create truly responsive components without hardcoded widths.