CSS | Ordering Flex Items - GeeksforGeeks

18 Nov, 2019
The order property of CSS can be used for ordering flex items. It specifies the order of a flex item with respect to the other flex items. The element has to be a flexible item for the order property to work. The elements are displayed in ascending order of their order values. If two elements have the same order value then they are displayed on the basis of their occurrence in the source code.
Syntax:
order: integer | initial | inherit
Property Values:
Integer: It denotes the order of the flex items. The default value of a flex item is 0.
Initial: It sets the property to its default value.
Inherit: It means that the associated element takes the specified value of its parent element order property.
Example 1:
<!DOCTYPE><html>  <head>    <title>        CSS | Ordering Flex Items    </title>          <style>        #GFG {            width: 400px;            height: 100px;            border: 1px solid #d3d3d3;            display: -webkit-flex; /* Safari */            display: flex;        }        #GFG div {            width: 70px;            height: 70px;        }              /* Safari 6.1+ */        div#second {-webkit-order: 2;}        div#fourth {-webkit-order: 4;}        div#third {-webkit-order: 3;}        div#first {-webkit-order: 1;}              /* Normal syntax */        div#second {order: 2;}        div#fourth {order: 4;}        div#third {order: 3;}        div#first {order: 1;}    </style></head>  <body>    <div id="GFG">        <div style="background-color:yellow;" id="second"></div>        <div style="background-color:blue;" id="fourth"></div>        <div style="background-color:green;" id="third"></div>        <div style="background-color:red;" id="first"></div>    </div></body>  </html>
Output:
Example 2:
<!DOCTYPE><html>      <head>    <title>        CSS | Ordering Flex Items    </title>          <style>        #GFG {            width: 400px;            height: 100px;            border: 1px solid #d3d3d3;            display: -webkit-flex; /* Safari */            display: flex;        }        #GFG div {            width: 70px;            height: 70px;        }              /* Safari 6.1+ */        div#second {-webkit-order: 2;}        div#fourth {-webkit-order: 4;}        div#third {-webkit-order: 3;}        div#first {-webkit-order: 1;}              /* Normal syntax */        div#second {order: 2;}        div#fourth {order: 4;}        div#third {order: 3;}        div#first {order: 1;}    </style></head>  <body>    <div id="GFG">        <div style="background-color:green;" id="second"></div>        <div style="background-color:pink;" id="fourth"></div>        <div style="background-color:black;" id="third"></div>        <div style="background-color:violet;" id="first"></div>    </div></body>  </html>
Output:
Supported Browsers: The browsers supported by Ordering Flex Items are listed below:
Google Chrome 29.0, 21.0 -webkit-
Mozilla Firefox 28.0, 18.0 -moz-
Internet Explorer 11.0
Safari 9.0, 6.1 -webkit-
Opera 17.0
CSS-Properties
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to Upload Image into Database and Display it using PHP ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript