flexWrap Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:flexWrap

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. flexWrap

Description

The flexWrap property sets whether the flexible items should wrap or not.

Property Values

ValueDescription
nowrap Default value. Specifies that the flexible items will not wrap
wrap flexible items will wrap if necessary
wrap-reverse flexible items will wrap, if necessary, in reverse order
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: nowrap
Return Value: A String, representing the flex-wrap property of an element
CSS VersionCSS3

Make the flexible items wrap if necessary:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from   w  ww  .ja v a  2s . c  o  m
    width: 200px;
    height: 150px;
    border: 1px solid #c3c3c3;
    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:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:red;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:blue;">E</div>
  <div style="background-color:lightgreen;">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>

Related Tutorials