CSS Property flex-wrap








The flex-wrap property is a property of the Flexible Box Layout.

The flex-wrap property sets whether to wrap the flexible items.

Summary

Initial value
nowrap
Inherited
no
CSS Version
CSS3
JavaScript syntax
object.style.flexWrap="nowrap"
Animatable
no

CSS Syntax

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

Property Values

nowrap
Default value. don't wrap the flexible items
wrap
wrap the flexible items if necessary
wrap-reverse
wrap the flexible items if necessary in reverse order

Browser compatibility

flex-wrap Yes 11.0 Yes Yes Yes




Example

<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!--  w w w .j  a  v  a 2 s  .  c  o  m-->
    width: 200px;
    height: 200px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    display: flex;
    flex-wrap: wrap;
}

#main div {
    width: 50px;
    height: 50px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:red;">A</div>
  <div style="background-color:blue;">B</div>
  <div style="background-color:tomato;">C</div>
  <div style="background-color:yellow;">D</div>
  <div style="background-color:grey;">E</div>
  <div style="background-color:green;">F</div>
</div>

</body>
</html>

Click to view the demo





Example 2

Compare the flex-wrap settings.

<!DOCTYPE html>
<html>
<style>
.flex-container {<!--from  w w  w . j a va  2  s .  c  om-->
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid silver;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}
.nowrap  { 
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.wrap    { 
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}  
.wrap li {
  background: gold;
}

.wrap-reverse         { 
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}  
.wrap-reverse li {
  background: blue;
}

.flex-item {
  background: red;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color: white;
}
</style>
</head>
<body>
<ul class="flex-container nowrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
</ul>

<ul class="flex-container wrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
</ul>

<ul class="flex-container wrap-reverse">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
</ul>
</body></html>

Click to view the demo