Javascript DOM CSS Style flexFlow Property

Introduction

Make the flexible items display in columns, and no wrapping:

document.getElementById("main").style.flexFlow = "column nowrap";

Click the button to set the value of the flexFlow property to "column nowrap".

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from  w  w  w.j  av a2  s  .  c  o m
  width: 200px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-flow: row 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.flexFlow = "column nowrap";
}
</script>

</body>
</html>

The flexFlow property is a shorthand property for the flexDirection and the flexWrap properties.

The flexDirection property specifies the direction of the flexible items.

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

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

Property Values

Value	Description
flex-direction	Possible values: row row-reverse column column-reverse initial inherit Default value is "row". Specifying the direction of the flexible items
flex-wrap	Possible values: nowrap wrap wrap-reverse initial inherit Default value is "nowrap". Specifying whether the flexible items should wrap or not
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The flexFlow property Default Value:row nowrap

The flexFlow property returns a String representing the flex-flow property of an element.

Previous Next