Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Reordering Individual Flex Items using CSS3
To reorder the individual Flex Items using CSS3, use the order property. Remember, this works only in case of flex items. Let’s say you want to set the 1st flex item as the last, then achieve this using the CSS order property.
Set the parent container
Set a div container with child divs −
<div class="container"> <div class="first">First Div</div> <div class="second">Second Div</div> <div class="third">Third Div</div> </div>
The flex container
Set the above container as a flex using the display property with the value flex −
.container {
height: 150px;
display: flex;
width: 100%;
border: 2px solid red;
}
Reorder the 1st flex item as 2nd
The order property is used to reorder the first flex item as second −
.first {
background-color: rgb(55, 0, 255);
order:2;
}
Reorder the 2nd flex item as 3rd
The order property is used to reorder the second flex item as third −
.second {
background-color: red;
order:3;
}
Reorder the 3rd flex item as 1st
The order property is used to reorder the third flex item as first −
.third {
background-color: rgb(140, 0, 255);
order:1;
}
Example
The following is the code for reordering flex items −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
height: 150px;
display: flex;
width: 100%;
border: 2px solid red;
}
div {
width: 200px;
height: 150px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
order:2;
}
.second {
background-color: red;
order:3;
}
.third {
background-color: rgb(140, 0, 255);
order:1;
}
</style>
</head>
<body>
<h1>Reordering individual items example</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
Updated on: 26-Dec-2023
108 Views
Advertisements