CSS Flexbox Items

Flexbox is a layout system that arranges items in rows and columns.

Flexbox items are the immediate children in a flex container.

Items that are deeper than the children are not considered flex items.

Example

#

A flex container with 13 flex items.

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
  .flex-items {
    background-color: #776fac;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
  }

  .flex-items > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    width: 100px;
  }
</style>

<div class="flex-items">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>

Using flex items

#

Direct child elements in a flex container automatically become flex items.

Each flex item can be controlled with these properties:


The flex-grow property

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The last item stretches to fill the remaining space.

1
2
3
<style>
  .flex-grow {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-grow > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-grow">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

For details on flex-grow, see our CSS flex-grow Property Reference.


The flex-shrink property

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

Item 2 is set to shrink. It shrinks relative to the other items when resizing the browser.

1
2
3
4
5
6
7
<style>
  .flex-shrink {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-shrink > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-shrink">
  <div>1</div>
  <div style="flex-shrink: 2">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

For details on flex-shrink, see our CSS flex-shrink Property Reference.


The flex-basis property

The flex-basis property specifies the initial width (the basis) of the item.

Item 2 has a 40% basis.

1
2
3
4
5
<style>
  .flex-basis {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-basis > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-basis">
  <div>1</div>
  <div style="flex-basis: 40%;">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

For details on flex-basis, see our CSS flex-basis Property Reference.


The flex property

The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

These items have default growth, shrink, and a 100px basis.

1
2
3
4
5
6
<style>
  .flex {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
    flex: 0 1 100px;
  }
</style>

<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

The order property

The order property specifies the display order of a flex item.

These items are ordered as: 4, 2, 1, 3.

1
2
3
4
<style>
  .flex-order {
    background-color: #776fac;
    padding: 5px;
    display: flex;
  }

  .flex-order > div {
    background-color: aliceblue;
    margin: 5px;
    height: 80px;
    width: 100px;
    line-height: 80px;
    text-align: center;
    font-size: 18px;
  }
</style>

<div class="flex-order">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

For details on order, see our CSS order Property Reference.


Flexbox Properties

A list of all flexbox properties for flexbox.

Property Description
display Specifies the type of display flow for the element
flex-wrap Specifies whether to wrap flex items when they run out of space
flex-direction Specifies the direction of the items in a flex container
flex-flow Shorthand for flex-direction and flex-wrap
gap Space between rows and columns.
row-gap Space between rows.
column-gap Space between columns.
justify-content Horizontally aligns items when they do not use all available space
align-items Vertically aligns the flex items when they don't use all available space
align-content Specifies that, instead of aligning flex items, it aligns flex lines
order Specifies the order of an item relative to the other items.
align-self Used on flex items. Overrides the container's align-items setting
flex-basis Specifies the initial width (the basis) of an item.
flex-grow Specifies how an item stretches (grows) in the flex container
flex-shrink Specifies how an item contracts (shrinks) in the flex container
flex Shorthand for flex-grow, flex-shrink, and flex-basis

Browser Support of Flexbox

This table shows when flexbox support started for each browser.

Chrome
29.0 Aug 2013
Firefox
28.0 Mar 2014
IE/Edge
11.0 Oct 2013
Opera
17.0 Aug 2013
Safari
9.0 Sep 2015

You may also like

Guides