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.
A flex container with flex-wrap
set to wrap
.
Items wrap when rows are filled.
<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>
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
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. |
Click the buttons to see the different flex-wrap
values.
<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>
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 |