CSS - order

Quiz

Description

CSS order property determines the visual order of flex items within the flex container.

You can assign numerical values to the order property, where items with lower values appear earlier, while items with higher values appear late in the display sequence.

Possible Values

integer value - Any valid integer value.

Applies to

All the HTML elements.

DOM Syntax

order: any integer value;

Here is the example which shows effect of this property −

<html>
<head>
<style>
   .my-order {
      display: flex;
      background-color: #0ca14a;
   }
   .my-order div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 90px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-order">
      <div style="order: 3">Flex item 1</div>
      <div style="order: 6">Flex item 2</div>
      <div style="order: 2">Flex item 3</div>
      <div style="order: 4">Flex item 4</div>
      <div style="order: 1">Flex item 5</div>
      <div style="order: 5">Flex item 6</div>
   </div>
</body>
</html>

Print Page