The flex-direction property for CSS specifies how flex items are placed in the flex container by setting the direction of the flex container's main axis.
object.style.flexDirection = "value"; <'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.
<!doctype html>
<html>
<head>
<style>
.myclass
{
display: flex;
flex-direction: 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-direction: 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-direction: 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;
}
.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>
<button>column</button>
<button>column-reverse</button>
<button>row</button>
<button>row-reverse</button>
<div class="myclass">
<div>flex-direction1</div>
<div>flex-direction2</div>
<div>flex-direction3</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".myclass").style.flexDirection = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>