CSS order

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

HTML with CSS Code
<!DOCTYPE html>
      .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;}

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

CSS order Syntax

The syntax of order property in CSS, is:

order: x;

The value of x should be any of the following:

  • number - used to define customer order for flex item(s). The default value is 0
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »