CSS flex-flow

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

<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>

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

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

row wrap row nowrap row wrap-reverse row-reverse wrap row-reverse nowrap row-reverse wrap-reverse column wrap column nowrap column wrap-reverse column-reverse wrap column-reverse nowrap column-reverse wrap-reverse initial inherit

<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>  

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

• Our CSS flex-wrap Property Reference
• Our CSS flex-direction Property Reference
• Our CSS Flexbox Tutorial