CSS order

The CSS order property is used when we need to customize the order of flex items in a flex container. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{display: flex; background-color: brown;}
      .container > div{padding: 12px; border: 1px solid coral; color: wheat;}
      #one{order: 3;}
      #two{order: 1;}
      #three{order: 4;}
      #four{order: 2;}
   </style>
</head>
<body>

   <div class="container">
      <div id="one">A</div>
      <div id="two">B</div>
      <div id="three">C</div>
      <div id="four">D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

In the above example, the .container class is used to define the container div element that has the

display: flex property;

This makes the container a flex container, and its child elements (i.e., div elements) are flex items. Also, the

background-color: brown;

property is used to set the background color of the container to brown. The

.container > div

is used to select all immediate child div elements of the .container class. It sets the

padding: 12px;

property to give some padding to the divs,

border: 1px solid coral;

to set the border to 1px solid coral color, and

color: wheat;

to set the text color to wheat.

The div elements' IDs are one, two, three, and four. The order property, which specifies the order in which the elements appear in the flex container, is applied to each of these div elements using their IDs. #two has an order of one, #four has an order of two, #one has an order of three, and #three has an order of four. Therefore, the order of the child divs is: #two, #four, #one, #three.

CSS order syntax

The syntax of the order property in CSS is:

order: x;

The value of x should be any of the following:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!