The flex-wrap property for CSS 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.
object.style.flexWrap = "value"; <'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-wrap: 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-wrap: 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;
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>
<button>initial</button>
<button>nowrap</button>
<button>wrap</button>
<button>wrap-reverse</button>
<div class="myclass">
<div>flex-wrap1</div>
<div>flex-wrap2</div>
<div>flex-wrap3</div>
</div>
<script>
function myfunction(myparameter)
{
document.querySelector(".myclass").style.flexWrap = myparameter.target.innerHTML;
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>