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
How to set the order of flexible items using CSS?
Generally, all the HTML elements renders on the web page in the same order in which they are defined in the HTML document. But we can change the order of any element using the order property of CSS. We can use the order property on the elements which are defined inside a flexbox or an element that contains the display: flex; property. Once we used the display flex on the parent element, we can use the order property to change the order of the child flexible items using the order property.
NOTE − Please make a note that the order property will only work with the elements that are inside the flexbox or the container that contains display flex property.
Syntax
The below syntax will show you how you can use the order property with the flexible items to order them in a particular order of your choice −
order: numeric_value;
Let us now understand the use of the order property in details by implementing it practically with the help of code example.
Steps
Step 1 − In the first step, we will define a parent element which will act as a flexbox and the order of its child elements will be changed using the order property.
Step 2 − In the next step, we will define the child elements and use the order property with them to make them appear in the order you want.
Step 3 − In the final step, we will grab all the elements with their respective classes and apply the required CSS to all the elements.
Example
The below example will help you understand the use of the order property to order the flexible items in any order −
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
display: flex;
border: 2px solid red;
}
.inner-div {
border: 1px solid green;
padding: 5px;
margin: 5px;
}
.inner-div1 {
order: 3;
}
.inner-div2 {
order: 5;
}
.inner-div3 {
order: 1;
}
.inner-div4 {
order: 2;
}
.inner-div5 {
order: 4;
}
</style>
</head>
<body>
<center>
<h2>Set the order of flexible items using CSS</h2>
<p>The flexible div elements of the below flexbox container are ordered using the order property of CSS.</p>
<div class = "main-container">
<div class = "inner-div inner-div1"> This is the 1st flexible div element set to 3rd position using the order property. </div>
<div class = "inner-div inner-div2"> This is the 2nd flexible div element set to 5th position using the order property.</div>
<div class = "inner-div inner-div3"> This is the 3rd flexible div element set to 1st position using the order property. </div>
<div class = "inner-div inner-div4"> This is the 4th flexible div element set to 2nd position using the order property. </div>
<div class = "inner-div inner-div5"> This is the 5th flexible div element set to 4th position using the order property. </div>
</div>
</center>
</body>
</html>
In the above code example, we have used the order property with the flex items to change the default order of the HTML elements inside the flexbox. We changed the position of all the child elements from their default order to the order in which we want them to appear.
Let us see one more complex code example in which we will order multiple elements inside the flexbox to different positions in a complex arrangement.
Approach
The approach of this example is almost similar to the previous example. You just need to add some more HTML elements in the document to make it complex and arrange them in order of your choice.
Example
The below example will illustrate you how to arrange the HTML elements in different order using the order property −
<!DOCTYPE html>
<html>
<head>
<style>
.main-container {
display: flex;
border: 2px solid red;
flex-wrap: wrap;
justify-content: center;
}
.inner-div {
border: 1px solid green;
padding: 5px;
margin: 2px;
width: 16%;
}
.inner-div1 {
order: 10;
}
.inner-div2 {
order: 8;
}
.inner-div3 {
order: 9;
}
.inner-div4 {
order: 7;
}
.inner-div5 {
order: 4;
}
.inner-div6 {
order: 1;
}
.inner-div7 {
order: 5;
}
.inner-div8 {
order: 3;
}
.inner-div9 {
order: 6;
}
.inner-div0 {
order: 2;
}
</style>
</head>
<body>
<center>
<h2>Setting the order of flexible items using CSS </h2>
<p>The flexible div elements of the below flexbox container are ordered using the order property of CSS.</p>
<div class = "main-container">
<div class = "inner-div inner-div1"> This is the 1st flexible div element set to 10th position using the order property. </div>
<div class = "inner-div inner-div2"> This is the 2nd flexible div element set to 8th position using the order property.</div>
<div class = "inner-div inner-div3"> This is the 3rd flexible div element set to 9th position using the order property. </div>
<div class = "inner-div inner-div4"> This is the 4th flexible div element set to 7th position using the order property. </div>
<div class = "inner-div inner-div5"> This is the 5th flexible div element set to 4th position using the order property. </div>
<div class = "inner-div inner-div6"> This is the 6th flexible div element set to 1st position using the order property. </div>
<div class = "inner-div inner-div7"> This is the 7th flexible div element set to 5th position using the order property.</div>
<div class = "inner-div inner-div8"> This is the 8th flexible div element set to 3rd position using the order property. </div>
<div class = "inner-div inner-div9"> This is the 9th flexible div element set to 6th position using the order property. </div>
<div class = "inner-div inner-div0"> This is the 10th flexible div element set to 2nd position using the order property. </div>
</div>
</center>
</body>
</html>
In this example, we have used a complex arrangement of elements with multiple number of elements and order them in the order you want to display or arrange them. We have used 10 elements and arrange them in different order from 1 to 10 from their default order.
Conclusion
In this article, we have learned about the way of setting the order of the flexible items on the web page. We have discussed the approach with the help of two different code examples. In the former one, we have used the small amount of div elements and rearrange them using the order property on different positions. While in the later one, we have used a complex arrangement and arrange the elements in the order we want to display them on the browser.
41 Views
