order - HTML CSS CSS Property

HTML CSS examples for CSS Property:order

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. order

Description

The order CSS property sets the order in which a flex items are displayed and laid out.

The following table summarizes the order Property.

Item Value
Default value: 0
Applies to:Flex items and absolutely-positioned children of flex containers
Inherited: No
Animatable: yes.

Syntax

The syntax of the property is as follows: 


order:     integer | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
integer Set the order for the flexible item. The default value is 0.
initial Sets this property to its default value.
inherit take the value of its parent element order property.

The example below shows the order property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 order Property</title>
  <style type="text/css">
  .flex-container {<!--from w ww . j a  va  2 s.com-->
    height: 200px;
    width: 300px;
    font-size: 32px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex; /* Standard syntax */
  }
  .flex-container div {
    width: 100px;
  }
  .item1 {
    background: #e84d51;
    -webkit-order: 2; /* Safari 6.1+ */
    order: 2;
  }
  .item2 {
    background: #7ed636;
    -webkit-order: 1; /* Safari 6.1+ */
    order: 1;
  }
  .item3 {
    background: #2f97ff;
    -webkit-order: 3; /* Safari 6.1+ */
    order: 3;
  }
</style>
 </head>
 <body>
  <div class="flex-container">
   <div class="item1">
    1
   </div>
   <div class="item2">
    2
   </div>
   <div class="item3">
    3
   </div>
  </div>
 </body>
</html>

Related Tutorials