Всегда заказывать гибкий элемент в последней позиции

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

Обычно элементы располагаются в порядке их появления в разметке. Однако вы можете указать неявный порядок, используя свойство order в css. Это разместит элементы в соответствии с их порядком. Если два элемента имеют одинаковое значение для этого свойства порядка, они останутся размещенными в соответствии с исходной разметкой. В каком-то смысле вы можете рассматривать это как форму группировки: сначала с порядком 0, затем с порядком 1, .... (установка отрицательного значения для порядка, конечно, поместит их перед группой 0 ; вот как работает трюк -1 для размещения элемента первым)

Вы можете использовать это для решения вашей проблемы, просто установив order второго дочернего элемента на 1, все остальные элементы будут иметь значение по умолчанию 0, поэтому должно быть указано раньше.

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