CSS flex-wrap Property

The flex-wrap property sets how items wrap in a container.

By default, flex items do not wrap and are packed in a single row.

Example

#

A flex container with flex-wrap set to wrap.
Items wrap when rows are filled.

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;
    width: 75px;
    text-align: center;
    line-height: 55px;
    font-size: 20px;
  }
</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>

Syntax

flex-wrap: nowrap | wrap | wrap-reverse | 
           initial | inherit;

Values

#

Value Description
nowrap Default, flexible items will not wrap
wrap Wraps flexible items if necessary
wrap-reverse Flexible items will wrap, if necessary, in reverse order
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-wrap values.

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

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

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

Browser support

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