Dofactory.com
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 flex-wrap

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


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.

Guides