订购弹性物料

容器中的伸缩项目按它们在源代码中出现的顺序进行布局。可以使用order属性更改此订单。

在我们的示例中，如我们所见，有5个项目被排列，这是代码中出现的顺序。

订购

让我们使用订单来混合弹性商品。我们要做的是在任意一个flex项目类中，将order设置为1，然后看看发生了什么。

<div class="container d-flex">
  <div class="flex-item item-1">Item 1</div>
  <div class="flex-item item-2">Item 2</div>
  <!-- Setting order:1 to item-3 class -->
  <div class="flex-item item-3">Item 3</div>
  <div class="flex-item item-4">Item 4</div>
  <div class="flex-item item-5">Item 5</div>
</div>

因为我们有单独的类，所以我们可以将order属性设置为item-3或您身上有任何项目。

...
.item-3 {
    background-color: #1C4C56;
    order: 1
}
...

添加后，您会看到第3个项目将移至最后一个项目，这是因为默认情况下所有项目的顺序均为0。
similarly, if we change 日e order of item 4 to order:2 it will push to 日e end of 日e container.

...
.item-4 {
    background-color: #1C4C56;
    order: 2
}
...

顺序优先

如果项目对e.x的顺序相同：如果项目2和项目3的顺序与 order: 1

...
.item-2 {
    ...
    order: 1
}
.item-3 {
    ...
    order: 1
}
...

所以安排会像

• The 0^日 订单商品将排在首位（按Delault订单）。
• 然后，item-2将紧随其后，然后是item-3，因为在源代码中，顺序也是item-2，然后是item-3。
• 如果源代码中item-3在item-2上方，则item-3将首先显示，然后显示item-2（如果两者具有相同的顺序）。

因此，弹性项目的优先级与源代码中的顺序一致。

演示版

看笔
格罗夫 由rehmaanali（@geekstrick)
上 密码笔.

结论

因此，order属性接受整数值，并用于控制flex-container中项目的顺序。具有相同顺序值的元素按它们在源代码中出现的顺序排列。

.
.