Flexbox 是一种 CSS 布局模式，它可以帮助我们更加方便地实现响应式布局和弹性布局。其中，order 属性是 Flexbox 中的一个重要属性，它可以用来改变弹性容器中弹性子元素的顺序。本文将详细介绍 order 属性的用法及应用实例。
order 属性的基本用法
order 属性用来改变弹性子元素的顺序，它的默认值为 0。当多个弹性子元素的 order 值不同时，它们的显示顺序将按 order 值从小到大排列，order 值相同的则按文档流中的顺序排列。
下面是一个简单的示例，其中有三个弹性子元素，它们的 order 值分别为 0、1、-1：
<div class="flex-container"> <div class="item item1">Item 1</div> <div class="item item2" style="order: 1;">Item 2</div> <div class="item item3" style="order: -1;">Item 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- - ----- - ----- -- ------- ----- -------- ----- ----------- ------- ----------------- -------- ------- --- ----- ----- -------------- ---- -
效果如下图所示：
可以看到，由于 order 值不同，Item 3 被放在了最左边，Item 2 被放在了最右边，而 Item 1 则按照文档流中的顺序排列。
order 属性的高级用法
除了改变弹性子元素的顺序，order 属性还可以用来实现一些高级的布局效果。
实现元素的优先级
在实际开发中，我们有时需要让某些元素优先显示，而另一些元素则次要。这时，我们可以通过改变它们的 order 值来实现。
例如，下面的示例中，有两个元素，它们的 order 值分别为 1 和 0，这样就可以实现第一个元素优先显示的效果：
<div class="flex-container"> <div class="item item1" style="order: 1;">Item 1</div> <div class="item item2">Item 2</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- - ----- - ----- -- ------- ----- -------- ----- ----------- ------- ----------------- -------- ------- --- ----- ----- -------------- ---- -
效果如下图所示：
实现元素的分组
有时候，我们需要将某些元素分为一组，以便更好地控制它们的布局效果。这时，我们可以将这些元素的 order 值设置为相同的值，从而实现分组效果。
例如，下面的示例中，有四个元素，它们的 order 值分别为 1、2、3 和 4，这样就可以将它们分为一组：
<div class="flex-container"> <div class="item item1" style="order: 1;">Item 1</div> <div class="item item2" style="order: 2;">Item 2</div> <div class="item item3" style="order: 3;">Item 3</div> <div class="item item4" style="order: 4;">Item 4</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- - ----- - ----- -- ------- ----- -------- ----- ----------- ------- ----------------- -------- ------- --- ----- ----- -------------- ---- -
效果如下图所示：
实现元素的层叠效果
order 属性还可以用来实现元素的层叠效果。通常情况下，元素的层叠顺序是按照它们在文档流中的顺序来确定的，但是通过改变它们的 order 值，我们可以改变它们的层叠顺序。
例如，下面的示例中，有三个元素，它们的 order 值分别为 1、2 和 3，这样就可以实现层叠效果：
<div class="flex-container"> <div class="item item1" style="order: 1;">Item 1</div> <div class="item item2" style="order: 2;">Item 2</div> <div class="item item3" style="order: 3;">Item 3</div> </div>
-- -------------------- ---- ------- --------------- - -------- ----- - ----- - ----- -- ------- ----- -------- ----- ----------- ------- ----------------- -------- ------- --- ----- ----- -------------- ---- ----------- --- --- --- ----- -
效果如下图所示：
总结
order 属性是 Flexbox 布局中的一个重要属性，它可以用来改变弹性子元素的顺序，并且还可以实现一些高级的布局效果。在实际开发中，我们可以根据具体需求来灵活运用 order 属性，以实现更加优秀的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dbe4fa1886fbafa48c32bf