CSS flex-flow Property

The flex-flow property is a shortcut for two flex properties.

They are flex-direction and flex-wrap.

Example

#

A flex container with flex-flow set to column wrap. The items are packed into columns and then wrap onto the next column.

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

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

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

The flex-flow property controls the flex direction and wrapping.

This property is a shorthand property for

Syntax

flex-flow: flex-direction flex-wrap | 
           initial | inherit;

Values

#

Value Description
flex-direction Sets the packing direction of flex items. Possible values:
  • row (default)
  • row-reverse
  • column
  • column-reverse
  • initial
  • inherit
flex-wrap Sets the wrapping of flex items. Possible values:
  • nowrap (default)
  • wrap
  • wrap-reverse
  • initial
  • inherit
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different flex-flow values.

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

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

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

Browser support

This table shows when flex-flow 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