总是在最后一个位置订购弹性项目

Question

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

<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 的，...。（为 order 设置负值当然会将它们放在 before 0组；这就是首先放置元素的 -1 技巧的工作原理）

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

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