Javascript Reference - HTML DOM Style flexWrap Property

The flexWrap property gets and sets whether to wrap the flexible items.

Browser Support


`flexWrap`	Yes	10	Yes	Yes (WebkitFlexWrap)	Yes

Syntax

Return the flexWrap property:

var v = object.style.flexWrap

Set the flexWrap property:

object.style.flexWrap='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

Technical Details

Default Value:	nowrap
Return Value:	A string representing the flex-wrap property
CSS Version	CSS3

Example

The following code shows how to let the flexible items wrap if necessary:


<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!-- w  w w .  ja  va 2s.  c  om-->
    width: 200px;
    height: 150px;
    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:yellow;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:grey;">E</div>
  <div style="background-color:green;">F</div>
</div>

<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("main").style.WebkitFlexWrap = "nowrap"; // Safari 6.1+
    document.getElementById("main").style.flexWrap = "nowrap";
}
</script>

</body>
</html>

The code above is rendered as follows: