object.style.flexFlow = "value"; <'flex-flow'> = <'flex-direction'> || <'flex-wrap'> <'flex-direction'> = column | column-reverse | row | row-reverse Specifies how flex items are placed in the flex container by setting the direction of the flex container's main axis.
column The flex container's main axis has the same orientation as the block axis of the current writing mode.
column-reverse The same as column except the main-start and main-end directions are swapped.
row The flex container's main axis has the same orientation as the inline axis of the current writing mode.
row-reverse The same as row except the main-start and main-end directions are swapped.
<'flex-wrap'> = nowrap | wrap | wrap-reverse Controls whether the flex container is single-line or multi-line and the direction of the cross-axis which determines the direction new lines are stacked in.
nowrap The flex container is single-line.
wrap The flex container is multi-line.
wrap-reverse The same as wrap except the cross-start and cross-end directions are swapped.
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
flex-flow: column-reverse;
}
.myclass > div
{
height: 100px;
width: 100px;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, red);
}
.myclass > div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
}
.myclass > div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, blue);
}
</style>
</head>
<body>
<div class="myclass">
<div>column-reverse1</div>
<div>column-reverse2</div>
<div>column-reverse3</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
flex-flow: row;
}
.myclass > div
{
height: 100px;
width: 100px;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, red);
}
.myclass > div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
}
.myclass > div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, blue);
}
</style>
</head>
<body>
<div class="myclass">
<div>row1</div>
<div>row2</div>
<div>row3</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
flex-flow: row-reverse;
}
.myclass > div
{
height: 100px;
width: 100px;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, red);
}
.myclass > div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
}
.myclass > div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, blue);
}
</style>
</head>
<body>
<div class="myclass">
<div>row-reverse1</div>
<div>row-reverse2</div>
<div>row-reverse3</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
flex-flow: nowrap;
width: 100px;
}
.myclass > div
{
height: 100px;
width: 100px;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, red);
}
.myclass > div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
}
.myclass > div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, blue);
}
</style>
</head>
<body>
<div class="myclass">
<div>nowrap1</div>
<div>nowrap2</div>
<div>nowrap3</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
flex-flow: wrap;
width: 100px;
}
.myclass > div
{
height: 100px;
width: 100px;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, red);
}
.myclass > div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
}
.myclass > div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, blue);
}
</style>
</head>
<body>
<div class="myclass">
<div>wrap1</div>
<div>wrap2</div>
<div>wrap3</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
flex-flow: wrap-reverse;
width: 100px;
}
.myclass > div
{
height: 100px;
width: 100px;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, red);
}
.myclass > div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
}
.myclass > div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, blue);
}
</style>
</head>
<body>
<div class="myclass">
<div>wrap-reverse1</div>
<div>wrap-reverse2</div>
<div>wrap-reverse3</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
}
.myclass > div
{
height: 100px;
width: 100px;
}
.myclass > div:nth-of-type(1)
{
background-image: linear-gradient(135deg, white, red);
}
.myclass > div:nth-of-type(2)
{
background-image: linear-gradient(135deg, white, yellow);
}
.myclass > div:nth-of-type(3)
{
background-image: linear-gradient(135deg, white, blue);
}
</style>
</head>
<body>
<button>initial</button><br>
<button>column</button>
<button>column-reverse</button>
<button>row</button>
<button>row-reverse</button><br>
<button>nowrap</button>
<button>wrap</button>
<button>wrap-reverse</button>
<div class="myclass">
<div>flex-flow1</div>
<div>flex-flow2</div>
<div>flex-flow3</div>
</div>
<script>
function myfunction(myparameter)
{
const myproperty = myparameter.target.innerHTML;
const mystyle = document.querySelector(".myclass").style;
mystyle.flexFlow = myproperty;
mystyle.width = "auto";
if(myproperty.includes("wrap"))
{
mystyle.width = "100px";
}
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>