# Flexbox (CSS Flexible Box Layout)

URL: https://softwaredictionary.org/terms/flexbox
Category: Web Development
Last updated: 2026-09-30

In short: Flexbox is a CSS layout model that arranges items in a single row or column and controls how they grow, shrink, align, and share the available space.

## What is Flexbox in CSS?

Flexbox, short for CSS Flexible Box Layout, is a way to lay out elements along one direction at a time, either a row or a column. You turn an element into a flex container with `display: flex`, and its direct children become flex items that line up next to each other and can stretch or shrink to fill the space.

Flexbox works along two axes. The main axis follows `flex-direction`, which is a row by default, and `justify-content` controls how items are spaced along it; the cross axis runs perpendicular to it, and `align-items` controls alignment in that direction. The `gap` property adds space between items, `flex-wrap` lets items move onto new lines, and the `flex` shorthand on an item, such as `flex: 1`, sets how much it grows or shrinks compared with its siblings.

Imagine books on a shelf with adjustable bookends: you can push them all to the left, center them, spread them out evenly, or let some books expand to fill the gap. Flexbox is the everyday tool for navigation bars, toolbars, button groups, rows of cards, and the famously tricky task of centering something both horizontally and vertically, and all modern browsers support it.

Flexbox is often compared with CSS Grid. Flexbox is one-dimensional and sizes items from their content outward, which suits components where items flow in a line, while Grid is two-dimensional and controls rows and columns at the same time, which suits page layouts and galleries. Most modern sites use both, often Grid for the overall page structure and Flexbox inside individual components.

## Key takeaways

- `display: flex` makes an element a flex container and its children flex items.
- Flexbox lays out items in one dimension: a row or a column.
- `justify-content` aligns items on the main axis; `align-items` aligns them on the cross axis.
- `gap`, `flex-wrap`, and `flex` control spacing, wrapping, and growth.
- Use Flexbox for components and CSS Grid for two-dimensional layouts.

## Example: A navigation bar and perfect centering with Flexbox

```css
/* A navigation bar: logo on the left, links on the right */
.navbar {
  display: flex;
  justify-content: space-between; /* main axis (horizontal) */
  align-items: center;            /* cross axis (vertical) */
  gap: 1rem;
}

/* Center anything horizontally and vertically */
.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```

## Frequently asked questions

**What is the difference between Flexbox and CSS Grid?**

Flexbox arranges items in a single row or column and is ideal for components like navigation bars. CSS Grid controls rows and columns at the same time, which makes it better for page layouts and galleries, and the two are often used together.

**How do I center a div with Flexbox?**

Give the parent `display: flex`, `justify-content: center`, and `align-items: center`. The child is then centered horizontally and vertically, as long as the parent is taller than the child.

**What does flex: 1 mean?**

`flex: 1` is shorthand that lets an item grow to fill free space, allows it to shrink, and sets its starting size to zero. As a result, all items with `flex: 1` share the available space equally.

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt