Javascript Reference - HTML DOM Style flexFlow Property

The flexFlow property gets and sets shorthand property for the flexDirection and the flexWrap properties.

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

The flexDirection property specifies the direction of the flexible items.

Browser Support


`flexFlow`	Yes	10	Yes	Yes (WebkitFlexFlow)	Yes

Syntax

Return the flexFlow property:

var v = object.style.flexFlow

Set the flexFlow property:

object.style.flexFlow='flex-direction flex-wrap|initial|inherit'

Property Values

flex-direction: Sets the direction of the flexible items Possible values:row|row-reverse|column|column-reverse|initial|inherit Default value is "row".
flex-wrap: Sets whether the flexible items should wrap or not. Possible values:nowrap|wrap|wrap-reverse|initial|inherit. Default value is "nowrap".

Technical Details

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

Example

The following code shows how to layout the flexible items display in columns, and no wrapping.


<!DOCTYPE html>
<html>
<head>
<style> 
#main {<!--   w  ww .j  a v a2  s .  c om-->
    width: 200px;
    height: 150px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    -webkit-flex-flow: row wrap; /* Safari 6.1+ */
    display: flex;
    flex-flow: row 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:gray;">E</div>
  <div style="background-color:green;">F</div>
</div>
<button onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("main").style.WebkitFlexFlow = "column nowrap"; // Safari 6.1+
    document.getElementById("main").style.flexFlow = "column nowrap";
}
</script>
</body>
</html>

The code above is rendered as follows: