CSS order

此CSS属性指定flex项目在网格容器或flex中的顺序。它基本上用于订购弹性物料。需要注意的是，如果元素不灵活，则此属性将不起作用。

元素将以其顺序值的升序显示。如果两个元素使用相同的顺序值，则它们将基于源代码中定义的出现而显示。

order属性修改弹性项目的视觉顺序。订单值最低的商品排在最前面，然后是较高的商品。它仅影响元素的视觉顺序，而不影响制表符或逻辑顺序。不得在非视觉媒体(例如语音)上使用它。

允许定义订单的负值。当我们要首先显示一个项目而其他项目的顺序保持不变时，负值很有用。如果未指定任何值，则将使用值0，这是其默认值。因此，当我们要首先显示一个项目时，可以为其提供负值，例如-1。由于此负值小于0，因此始终将首先显示相应的项目。

句法

order: integer | initial | inherit;

属性值

order属性使用整数值来定义项目的顺序。

integer：用于指定弹性物料的顺序。默认值为0。

initial：将属性值设置为其默认值。

inherit：顾名思义，元素使用其父元素的计算值。

让我们使用一些插图来了解order属性。

例1

   
      
   
   
   
 CSS order Property 
       

         
 1 
         
 2 
         
 3 
         
 4 
         
 5 
         
 6 
         
 7 
         
 8 
      
   

在上面的示例中，我们使用了负值以及某些元素的相同阶数。具有较小值的元素将首先显示，并且根据它们在代码中的出现将显示相同的顺序值。

如上述示例中，一个div元素的阶次值为-2，则它将首先显示，然后显示阶次值为-1的元素，依此类推。

例2

  
    
  
  
    
Order property
    

      
1
      
2
      
3
      
4
      
5