.palette-small { display: flex; } .palette-box:nth-child(1) .palette-small { flex-direction: column; justify-content: center; align-items: center; } .palette-box:nth-child(1) .color-2 { order: 9; align-self: stretch; } .palette-box:nth-child(1) .color-5 { align-self: stretch; } .palette-box:nth-child(1) .color-3 { align-self: center; } .palette-box:nth-child(1) .color-4 { order: 10; align-self: center; } .palette-box:nth-child(2) .palette-small { flex-direction: column; justify-content: space-between; align-items: flex-start; } .palette-box:nth-child(2) .palette-small .color-2 { order: 10; align-self: flex-end; } .palette-box:nth-child(2) .palette-small .color-6 { order: 9; align-self: flex-end; } .palette-box:nth-child(2) .palette-small .color-4 { order: 8; align-self: flex-start; } .palette-box:nth-child(2) .palette-small .color-1 { align-self: flex-start; } .palette-box:nth-child(3) .palette-small { flex-direction: row; justify-content: space-between; } .palette-box:nth-child(3) .part { display:flex; } .palette-box:nth-child(3) .part { flex-direction: column; justify-content: space-between; } .palette-box:nth-child(3) .color-1 { align-self: flex-start; } .palette-box:nth-child(3) .color-3 { align-self: flex-start; } .palette-box:nth-child(3) .color-4 { align-self: flex-end; } .palette-box:nth-child(3) .color-6 { align-self: flex-end; } .palette-box:nth-child(4) .palette-small { flex-direction: row; justify-content: space-between; } .palette-box:nth-child(4) .part { display:flex; } .palette-box:nth-child(4) .part:nth-child(2) { flex-direction: column-reverse; justify-content: space-between; }
Еще подскажите стоит ли использовать :first-child и :last-child Просто заметил, что везде применяю :nth-child даже не задумываясь. Есть ли в этом какие то минусы?
Самый простой и распространенный пример - “хлебные крошки” (это такой вид меню, по которому пользователь может отследить свой путь с главной страницы до текущей, например Главная->Каталог->Подкаталог->Карточка товара) и часто последний пункт в таком меню визуально отличается от остальных, а количество пунктов может изменяться - и отличный от других стиль гораздо проще прописать для :last-child, чем для какого-то :nth-child, номер которого придется постоянно изменять, при изменении длинны меню.
Опять же отступы часто требуется обнулить только у первого или последнего потомка - а число их (потомков) может меняться
Спасибо за совет. В ваших примерах действительно удобно их использование. Значит буду стараться применять и их.