CSS Flexbox

CSS Flexbox is a one-dimensional layout model that distributes space and aligns items within a container, making it ideal for navigation bars, centering, and dynamic row/column layouts.

Definition

Flexbox (Flexible Box Layout) is a CSS layout module designed for one-dimensional layouts: either a row or a column. It solves problems that were historically painful: vertical centering, equal-height columns, distributing space between items, and reordering content without changing HTML. Flexbox works by declaring a flex container with display: flex. The children become flex items. The container controls how items grow, shrink, align, and wrap along the main axis (direction) and cross axis (perpendicular). Flexbox is not a replacement for CSS Grid. Flexbox handles one dimension at a time. Grid handles two dimensions simultaneously. The common pattern is Grid for page-level layout and Flexbox for component-level alignment within grid cells. If you are still using inline-block or float for centering, you are writing CSS from a previous decade.

How it works

Set display: flex on the container. This creates a flex formatting context. The main axis direction is controlled by flex-direction (row, column, row-reverse, column-reverse). Items stretch by default along the cross axis. Use justify-content for main-axis alignment (flex-start, center, space-between, space-around, space-evenly). Use align-items for cross-axis alignment (stretch, center, flex-start, flex-end). Individual items can override alignment with align-self and control their growth/shrink with flex-grow, flex-shrink, and flex-basis.

Common use cases

Navigation bars (horizontal distribution), card grids where cards in the last row should not stretch unevenly, centering content both vertically and horizontally (justify-content: center + align-items: center), sticky footers, and media objects (image with text beside it).

Common misconception

Flexbox is not for page-level layouts. It can be used that way, but CSS Grid is more appropriate for two-dimensional page layouts. Flexbox shines at component-level alignment and distribution. Also, flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0; not flex-grow: 1. Understand what the shorthand means before using it.

Note

The gap property works in Flexbox (and Grid). It replaces the need for margin hacks on flex children. Check browser support: gap in flexbox is supported in all modern browsers.

In code

```css
/* Flexbox centering and distribution */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.nav a {
  flex-shrink: 0;
}

.nav .logo {
  margin-right: auto; /* pushes other items right */
}

## Common questions

Q: What is the difference between Flexbox and Grid?

A: Flexbox is one-dimensional (row OR column). Grid is two-dimensional (rows AND columns simultaneously).

Q: Can Flexbox replace CSS Grid?

A: No. They serve different purposes. Flexbox handles component-level alignment. Grid handles page-level layouts.

Key takeaways:

- Flexbox excels at one-dimensional layout: alignment, distribution, and centering.

- Use justify-content for main axis and align-items for cross axis alignment.

- Flexbox is ideal for navigation, card rows, and component-level layout.