flexFlow Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:flexFlow

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

Description

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

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:nowrapwrapwrap-reverseinitialinherit 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.

Technical Details

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

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

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#main {//from   w  w w.ja  v a2  s .co m
    width: 200px;
    height: 150px;
    border: 1px solid #c3c3c3;
    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: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.WebkitFlexFlow = "column nowrap"; // Safari 6.1+
    document.getElementById("main").style.flexFlow = "column nowrap";
}
</script>

</body>
</html>

Related Tutorials