CSS Flexbox Containers

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

A flex container is a parent element that contains flex items.

It arranges the flex items in a row-first or column-first way.

Example

#

A flex container with 4 flex items, arranged into a row.

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

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

<div class="flexbox">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The display property

To create a flex container use display:flex.

This instructs the container to use a flexbox layout.

By default, items are aligned in a single row.

Even when space gets tight, the items do not wrap.

A flex container with 7 items in a row.
Resizing the browser will not wrap the items.

1
2
3
4
5
6
7
<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: auto;
  }
</style>

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

The flex-direction property

The flex-direction property defines the flex item packing direction.

Possible values are: row, row-reverse, column, and column-reverse.

The default is row where flex items are packed in a row (horizontally).

flex-direction: row

A flex container with flex-direction set to row.

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

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

<div class="flex-direction-row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

flex-direction: row-reverse

A flex container with flex-direction set to row-reverse.

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

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

<div class="flex-direction-row-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

flex-direction: column

A flex container with flex-direction set to column (vertically).

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

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

<div class="flex-direction-column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

flex-direction: column-reverse

A flex container with flex-direction set to column-reverse.

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

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

<div class="flex-direction-column-reverse">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

The flex-wrap property

The flex-wrap property allows flex items to wrap.

Possible values are: nowrap, wrap, and wrap-reverse.

The default is nowrap, meaning items stay in a single row or column.

A flexbox with flex-wrap set to wrap.
Resize the browser to see its responsive behavior.

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

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

<div class="flex-wrap">
  <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>          

flex-wrap: nowrap

A flexbox with flex-wrap set to nowrap.
The items are compressed into a single row.

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

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

<div class="flex-nowrap">
  <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>

flex-wrap: wrap-reverse

A flexbox with flex-wrap set to wrap-reverse.
The flex items are packed in reverse order and they wrap.

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

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

<div class="flex-wrap-reverse">
  <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>

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


The flex-flow property

The flex-flow property is a shorthand for 2 properties.

They are: flex-direction and flex-wrap.

A flex container with flex-flow set to row wrap.
The items are packed in rows and they wrap.

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

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

<div class="flex-flow">
  <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>

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


The gap property

The gap property specifies the space between rows and columns.

The gap value can be any length value, including percentages.

A flex layout with a gap of 25 pixels.

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

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

<div class="flex-gap">
  <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>          

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


The row-gap property

The row-gap property specifies the space between rows.

The gap value can be any length value, including percentages.

A flex layout with a row-gap of 25 pixels.

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

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

<div class="flex-row-gap">
  <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>          

For details on row-gap, see our CSS row-gap Property Reference.


The column-gap property

The column-gap property specifies the space between rows.

The gap value can be any length value, including percentages.

A flex layout with a column-gap of 25 pixels.

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

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

<div class="flex-column-gap">
  <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>          

For details on column-gap, see our CSS column-gap 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