Здравствуйте. Подскажите, есть-ли способ сделать код не таким громоздким ?
.palette-small { display:flex; } .palette-box:nth-of-type(1) .palette-small{ flex-direction:column; justify-content:space-around; } .palette-box:nth-of-type(1) .color-2 { order:3; } .palette-box:nth-of-type(1) .color-3 { order:1; align-self:center; } .palette-box:nth-of-type(1) .color-5 { order:2; } .palette-box:nth-of-type(1) .color-4 { order:4; align-self:center; } .palette-box:nth-of-type(2) .palette-small { flex-direction:column-reverse; justify-content:space-around; } .palette-box:nth-of-type(2) .color-2,.color-6 { align-self:flex-end; } .palette-box:nth-of-type(2) .color-4,.color-1 { align-self:flex-start; } .palette-box:nth-of-type(3) .part { display:flex; flex-direction:column; justify-content:space-between; } .palette-box:nth-of-type(3) .palette-small { justify-content:space-between; } .palette-box:nth-of-type(4) .palette-small { justify-content:space-between; } .palette-box:nth-of-type(4) .part { display:flex; } .palette-box:nth-of-type(4) .palette-small .part:last-of-type { flex-direction:column-reverse; justify-content:space-between; }
Вряд ли. Все остальные варианты примерно такие же. Почитайте темы на форуме по этому разделу.
А сможете подсказать, при смене порядкового номера через order:; старый номер элемента уменьшается на 1 или ведёт себя как то иначе?
Не обязательно. Первый элемент в разметке вполне может стать с помощью свойства order последним, и наоборот.