css 中 order 是 啥意思

90 阅读1分钟

有一天清晨,我看到一个页面,出现了order:1这种写法,我孤陋寡闻,我无知,但我渴望知识的欲望达到极致,于是有了这篇文来记录我活在这个地球🌏的学习知识的一天。

order: 1; css Flexbox布局中的一个属性,用于控制项目在容器中的显示顺序

image.png

这道题做一下。得出来答案了吗。

接着说哈。

简单解释

在Flexbox布局中,order属性允许你重新排列项目的显示顺序,而不需要改变HTML结构。默认情况下,所有Flex项目的order值为0,它们按照HTML中的顺序排列。

当你给一个元素设置order: 1;时:

  • 这个元素会出现在所有order值小于1的元素之后
  • 但会出现在所有order值大于1的元素之前

再看一道题:

image.png

答案是这个:

image.png


再来:

image.png

这道题怎么做?

揭晓答案:

image.png


order: 1; 意味着该元素会出现在所有order值小于1的元素之后,但在所有order值大于1的元素之前。

默认情况下,所有Flex项目的order值为0。

image.png

关键点

  • order属性只适用于Flex容器内的项目
  • 默认的order值是0
  • 可以为order设置负值(如-1)使元素显示在前面
  • 具有相同order值的元素按照它们在HTML中的顺序显示
  • order只改变视觉呈现,不会影响文档的源码顺序或Tab键导航顺序