始终在最后一个位置订购弹性商品

Question

我有一个如下所示的弹性容器：

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    .
    .
    .
    <div class="child">n</div>
</div>

数量child每次都不同。我需要second child始终使用移动设备。

我知道order: -1每次都可以用来将它放在第一位。但我有兴趣知道我是否可以做些什么来每次都在最后一个位置订购它。

Answer 1

通常，元素按照它们在标记中出现的顺序排列。但是，您可以使用 css 中的属性指定隐式排序order。这将根据元素的顺序放置元素。如果两个元素具有相同的 order 属性值，它们将保持在原始标记之后的布局。在某种程度上，您可以将其视为分组的形式：首先是顺序为 0 的组，然后是顺序为 1 的组，...（为顺序设置负值当然会将它们放在0 组之前；这就是 - 1 个首先放置元素的技巧）

您可以通过简单地将order第二个子元素设置为 来解决您的问题1，所有其他元素将具有默认值 0，因此放置在前面。

.child:nth-child(2) {
  order: 1;
}