Dofactory.com
Login Sign up
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Feedback
Guides


On this page