WEB DEVELOPMENT

Home › Glossary › Web Development· 119 ·

CSS Flexbox

\siː ɛs ˈɛs ˈflɛksbɒks\n.

Filed underWeb DevelopmentFront End

In brief · quick answer

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.

§ 1 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.

§ 2 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`.

§ 3 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).

§ 4 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.

§ 5 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.

§ 6 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 */
}
```

§ 7 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.

How Atomic Glue helps

Atomic Glue uses Flexbox for clean, responsive component layouts. Our CSS is maintainable and modern. Get in touch to discuss your project.

Get in touch

# 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.

Category: Web Development (also: Front End)

Author: Atomic Glue Team

## 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](/glossary/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

## Common use cases

## Common misconception

## 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

## 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.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/css-flexbox