Runnable CSS Docs: Flexbox

Q: What does flex: 1 mean?

flex: 1 is short for flex: 1 1 0%: the item may grow (flex-grow: 1), may shrink (flex-shrink: 1), and starts from a size of zero (flex-basis: 0%). Items that all have flex: 1 split the free space equally, so they end up the same width unless their content cannot fit.

Q: What is the difference between justify-content and align-items?

justify-content places items along the main axis (horizontally in a row), and align-items places them along the cross axis (vertically in a row). With flex-direction: column the two axes swap, so justify-content becomes vertical.

Q: Why does my flex item overflow its container?

A flex item has min-width: auto by default, so it refuses to shrink below the width of its longest word or widest child. Set min-width: 0 (or overflow: hidden) on the item to let it shrink, for example to make text-overflow: ellipsis work.

Q: Does flexbox work on inline elements like span?

Yes. Any element with display: flex is a flex container, and its children become flex items whatever their own display value, so children stop being inline and accept width, height and margin like blocks.

What display: flex does

Put display: flex on a parent and its direct children line up in a row, side by side, and stretch to the same height. That one declaration replaces floats, inline-block and most positioning tricks for laying out a row of things.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>display flex</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { background: #e5e7eb; padding: 8px; margin-bottom: 12px; }
    .flex { display: flex; gap: 8px; }
    .item { background: #2563eb; color: white; padding: 10px 14px; }
    .tall { padding-block: 24px; }
  </style>
</head>
<body>
  <p>Without flex (normal block layout):</p>
  <div class="box">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
  <p>With display: flex:</p>
  <div class="box flex">
    <div class="item">One</div>
    <div class="item tall">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

In the first box each div takes a full line. In the second the three items sit in one row, each only as wide as its content, and One and Three stretch to the height of Two. Only the parent changed: display: flex goes on the container, never on the items.

Flexbox playground

Pick values and watch the items move. The code line under the box is the CSS for what you see, and the list under it is where the browser actually placed each item, measured with getBoundingClientRect().

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .controls { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 10px; }
    #box { display: flex; height: 170px; background: #e5e7eb; border: 2px solid #111827; }
    .item { background: #2563eb; color: white; width: 60px; padding: 8px; box-sizing: border-box; }
    .item:nth-child(2) { background: #16a34a; height: 80px; }
    .item:nth-child(3) { background: #f59e0b; height: 50px; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <div class="controls">
    <label>flex-direction <select data-p="flex-direction"><option>row</option><option>row-reverse</option><option>column</option><option>column-reverse</option></select></label>
    <label>justify-content <select data-p="justify-content"><option>flex-start</option><option>center</option><option>flex-end</option><option>space-between</option><option>space-around</option><option>space-evenly</option></select></label>
    <label>align-items <select data-p="align-items"><option>stretch</option><option>flex-start</option><option>center</option><option>flex-end</option><option>baseline</option></select></label>
    <label>gap <select data-p="gap"><option>0px</option><option>8px</option><option>24px</option></select></label>
  </div>
  <div id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  <pre id="out"></pre>
  <script>
    const box = document.getElementById('box');
    const selects = document.querySelectorAll('select');
    const update = () => {
      const css = [];
      selects.forEach((s) => { box.style.setProperty(s.dataset.p, s.value); css.push(s.dataset.p + ': ' + s.value + ';'); });
      const b = box.getBoundingClientRect();
      const places = [...box.children].map((el) => {
        const r = el.getBoundingClientRect();
        return el.textContent + ': x ' + Math.round(r.left - b.left - 2) + ', y ' + Math.round(r.top - b.top - 2) + ', ' + Math.round(r.width) + ' x ' + Math.round(r.height);
      });
      document.getElementById('out').textContent = '.box { display: flex; ' + css.join(' ') + ' }\n' + places.join('\n');
    };
    selects.forEach((s) => s.addEventListener('change', update));
    update();
  </script>
</body>
</html>

Things to try:

justify-content: space-between: item 1 lands at x 0 and item 3 touches the far edge.
align-items: center: the three items keep their own heights and their centers line up. With the default stretch, item 1 has no height of its own and fills the container's full 170px.
flex-direction: column: now justify-content moves items vertically and align-items horizontally. The two properties follow the axes, not the screen.

Main axis and cross axis

Every flex container has two axes. The main axis is the direction the items flow in, set by flex-direction. The cross axis runs across it.

`flex-direction`	Main axis	Cross axis	`justify-content` moves items	`align-items` moves items
`row` (default)	horizontal, in reading order	vertical	horizontally	vertically
`row-reverse`	horizontal, reversed	vertical	horizontally	vertically
`column`	vertical, top to bottom	horizontal	vertically	horizontally
`column-reverse`	vertical, bottom to top	horizontal	vertically	horizontally

In a right to left page (dir="rtl"), row starts at the right edge, because the main axis follows the writing direction.

Container properties

These go on the element with display: flex:

Property	What it does	Default
`flex-direction`	Row or column, and which way	`row`
`flex-wrap`	Whether items move to a new line when they run out of room	`nowrap`
`flex-flow`	Shorthand for `flex-direction` and `flex-wrap`	`row nowrap`
`justify-content`	Placement and spacing along the main axis	`normal` (acts as `flex-start`)
`align-items`	Placement of items along the cross axis	`normal` (acts as `stretch`)
`align-content`	Spacing between lines when items wrap	`normal`
`gap`	Space between items (`row-gap`, `column-gap`)	`0`

justify-content and align-items each have their own page with every value: justify-content and align-items. Wrapping and direction are on the flex-wrap page.

Item properties: flex-grow, flex-shrink, flex-basis

These go on the children and decide how they share the container's width:

flex-basis: the size an item starts from before free space is shared out (auto means "use my width or my content").
flex-grow: how many shares of the leftover space the item takes. 0 means it never grows.
flex-shrink: how much the item gives up when there is not enough space. 0 means it never shrinks.

The flex shorthand sets all three:

You write	Which means	Behavior
`flex: initial` (default)	`0 1 auto`	Content size, may shrink, never grows
`flex: 1`	`1 1 0%`	Starts from zero and takes an equal share of the space
`flex: auto`	`1 1 auto`	Content size plus a share of the leftover space
`flex: none`	`0 0 auto`	Exactly its content or width, never grows or shrinks
`flex: 2`	`2 1 0%`	Twice the share of an item with `flex: 1`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex grow</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; width: 480px; background: #e5e7eb; padding: 8px; margin-bottom: 8px; }
    .row div { background: #2563eb; color: white; padding: 8px 0; text-align: center; }
    .one { flex: 1; }
    .row .two { flex: 2; background: #16a34a; }
    .row .none { flex: none; width: 100px; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="row"><div class="one">flex: 1</div><div class="one">flex: 1</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="one">flex: 1</div><div class="two">flex: 2</div><div class="one">flex: 1</div></div>
  <div class="row"><div class="none">flex: none</div><div class="one">flex: 1</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.row')].map((row) =>
      [...row.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(' + ')
    ).join(' | ');
  </script>
</body>
</html>

Each row is 480px wide inside its padding, and the two 8px gaps leave 464px for the items. The printed widths show how it was shared: about 155px each in the first row, 116 + 232 + 116 in the second (the flex: 2 item gets twice the share of each neighbor), and 100 + 372 in the third, where the flex: none item keeps its width and the other item takes all the rest.

Real layouts with flexbox

A header with a logo at the start and links at the end is the most common flex layout. margin-inline-start: auto on one item eats all the free space before it and pushes it and everything after it to the end:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nav bar</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    nav { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #111827; }
    nav a { color: white; text-decoration: none; }
    .logo { font-weight: 700; font-size: 20px; }
    .push { margin-inline-start: auto; }
    .cta { background: #2563eb; padding: 6px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <nav>
    <a class="logo" href="#">Logo</a>
    <a class="push" href="#">Docs</a>
    <a href="#">Pricing</a>
    <a class="cta" href="#">Sign up</a>
  </nav>
</body>
</html>

align-items: center lines up the bigger logo text with the links, and gap spaces the links without margins to undo on the last one.

A second everyday pattern is a media row: a fixed-size icon and text that takes the rest and wraps inside its own column.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media object</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .media { display: flex; align-items: flex-start; gap: 12px; max-width: 420px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; }
    .avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #16a34a; }
    .text { flex: 1; min-width: 0; margin: 0; }
  </style>
</head>
<body>
  <div class="media">
    <div class="avatar"></div>
    <p class="text">This text wraps next to the circle. However long it gets, the circle keeps its 48px size because it has flex: none.</p>
  </div>
</body>
</html>

flex: none is the guarantee. Flex items shrink by default, so if you remove it from the circle and also remove flex: 1 from the text, the paragraph squeezes the circle to about 23px wide: an oval. To center one thing in a box, flexbox is two lines (justify-content: center; align-items: center); the center a div page compares that with the other ways.

order and accessibility

The order property and the -reverse directions change where items appear, not where they are in the HTML. Screen readers and the Tab key still follow the HTML order, so a keyboard user can jump from the first link on screen to the last one. Use them for decoration only; when the order means something, change the HTML.

Flexbox or grid

Flexbox works in one direction at a time: items in a row size themselves from their content, and a second line (with wrapping) does not line up with the first. Grid works in two: you define columns and rows and items snap into them. A nav bar, a toolbar or a form row is flexbox; a gallery or a page with a sidebar is grid.

Common mistakes

display: flex on the item instead of the parent. The container gets display: flex; its children are the items.
Expecting align-items to move items vertically with no height. If the container is only as tall as its tallest item, there is no room to move. Give the container a height, or it is working and just has nothing to do.
Text that overflows instead of shrinking. Flex items have min-width: auto. Add min-width: 0 to the item that should shrink.
Using flex: 1 and wondering why widths differ. Items with flex: 1 share space equally, but an item whose content cannot fit (a long URL, an image) will not shrink below it. min-width: 0 fixes that too.
Margins between items. Use gap on the container; it only goes between items.
Nesting flex needlessly. Only direct children are flex items. Grandchildren follow normal layout unless their own parent is also display: flex.

Frequently Asked Questions

What does display: flex do?

It turns an element into a flex container. Its direct children become flex items and are placed in a row by default, side by side, stretched to the same height, with properties like justify-content, align-items and gap controlling how they share the space.

What does flex: 1 mean?

flex: 1 is short for flex: 1 1 0%: the item may grow (flex-grow: 1), may shrink (flex-shrink: 1), and starts from a size of zero (flex-basis: 0%). Items that all have flex: 1 split the free space equally, so they end up the same width unless their content cannot fit.

What is the difference between justify-content and align-items?

justify-content places items along the main axis (horizontally in a row), and align-items places them along the cross axis (vertically in a row). With flex-direction: column the two axes swap, so justify-content becomes vertical.

Should I use flexbox or grid?

Use flexbox for a single row or column whose items size themselves from their content: nav bars, button groups, a label next to an input. Use grid when you want rows and columns that line up with each other, such as a card grid or a page layout.

Why does my flex item overflow its container?

A flex item has min-width: auto by default, so it refuses to shrink below the width of its longest word or widest child. Set min-width: 0 (or overflow: hidden) on the item to let it shrink, for example to make text-overflow: ellipsis work.

Does flexbox work on inline elements like span?

Yes. Any element with display: flex is a flex container, and its children become flex items whatever their own display value, so <span> children stop being inline and accept width, height and margin like blocks.

Related concepts