How to set the order of flexible items using CSS ?
Last Updated :
24 May, 2023
The purpose of the article is to set the order of the flexible items using CSS. You can achieve this task by using the CSS order property.
CSS order Property: This property is used to specify the order of flexible items relative to the rest of the flexible items inside the same container and keep in mind to set elements as flexible.
Syntax:
order: value;
Approach: Create an HTML page with various div elements and assign id to all div elements. After that, we will set the width and height of div elements, and then use the order property to rearrange these boxes in the correct order.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to set the order of
flexible items using CSS?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
#gfg1,
#gfg2,
#gfg3 {
margin: auto;
width: 350px;
height: 100px;
border-style: groove;
display: flex;
background-color: lightgrey;
}
#gfg1 div,
#gfg2 div,
#gfg3 div {
width: 70px;
height: 70px;
}
#div0,
#div2,
#div4 {
background-color: green;
}
#div1,
#div3 {
background-color: lightgreen;
}
div#div1 {
order: 2;
}
div#div2 {
order: 3;
}
div#div3 {
order: 4;
}
div#div4 {
order: 1;
}
div#div0 {
order: 5
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div id=gfg1>
<div id="div0"></div>
<div id="div1">Geeks</div>
<div id="div2">For</div>
<div id="div3">Geeks</div>
<div id="div4"></div>
</div>
<div id=gfg2>
<div id="div0">portal</div>
<div id="div1">a</div>
<div id="div2">computer</div>
<div id="div3">science</div>
<div id="div4">is</div>
</div>
<div id=gfg3>
<div id="div0"></div>
<div id="div1"></div>
<div id="div2">for</div>
<div id="div3">geeks</div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...