Переместить li-элементы без порядка в конец

Question

Я использую CSS flexbox для размещения li-элементов. Для этого я указываю порядок li-элементов в CSS.

Это отлично работает, но если я вставлю новые li-элементы без фиксированной позиции, они будут отображаться в начале, а не в конец.

Кто-нибудь знает, как li-элементы без позиции перемещаются в конец?

Example:
https://codepen.io/tawissus/pen/BajdpdV

Guido

Answer 1

Как упоминал @godfather, вы можете использовать .flex-container:nth-of-type. Или вам нужно применить порядок к вновь добавленному элементу li, имеющему класс flex-block. Обновите свой css вот так.

.flex-block:nth-of-type(1) { order: 5; }
.flex-block:nth-of-type(2) { order: 4; }
.flex-block:nth-of-type(3) { order: 1; }
.flex-block:nth-of-type(4) { order: 6; }
.flex-block:nth-of-type(5) { order: 2; }
.flex-block:nth-of-type(6) { order: 6; }
.flex-block:nth-of-type(7) { order: 7; }
.flex-block:nth-of-type(8) { order: 8; }
.flex-block:nth-of-type(9) { order: 9; }
.flex-block:nth-of-type(10) { order: 10; }

Answer 2

Если он гибкий, вы можете использовать flex-direction: row-reverse. Если ваши вещи не в порядке, используйте класс order: 1(base on your selection). Вот очень полезная статья о flex css -tricks.com Надеюсь, это поможет.