The approach of this article is to make the flexible items display in reverse order, and wrap if necessary by using a flex-wrap property in CSS.
The property is set to wrap-reverse Value. This Property is used to reverse the flow of the flex items when they wrap to new lines.
Syntax:
flex-wrap: wrap-reverse;
Example:
html
<!DOCTYPE html><html>
<head>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
} aa
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>How to make the flexible items
display in reverse order, and wrap
if necessary usingHTML5?</h3>
<div id="main">
<div style="background-color: #009900;">1</div>
<div style="background-color: #00cc99;">2</div>
<div style="background-color: #0066ff;">3</div>
<div style="background-color: #66ffff;">4</div>
<div style="background-color: #660066;">5</div>
<div style="background-color: #663300;">6</div>
</div>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari