Javascript DOM CSS Style flexWrap Property

Introduction

Make the flexible items wrap if necessary: 

document.getElementById("main".style.flexWrap = "wrap";

Click the button to set the value of the flexWrap property to "nowrap".

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {/*w ww  .jav  a  2 s  .  co  m*/
  width: 200px;
  height: 150px;
  border: 1px solid #c3c3c3;
  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:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
<button onclick="myFunction()">Test</button>
<script>
function myFunction() {
  document.getElementById("main").style.flexWrap = "nowrap";
}
</script>

</body>
</html>

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

If the elements are not flexible items, the flexWrap property has no effect.

Property Values

ValueDescription
nowrap Default value. Specifies that the flexible items will not wrap
wrap Sets that the flexible items will wrap if necessary
wrap-reverse Sets that the 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.

The flexWrap property Default Value: nowrap

The flexWrap property returns a String representing the flex-wrap property of an element.




PreviousNext

Related