Добрый день. Не получается поменять два последних цвета местами, поэтому 94%.
Подскажите, в чем ошибка? не совсем понимаю логику свойства order.
Добрый день.
Дело в том, что элементы с одинаковым значением order располагаются в том порядке, в каком они находятся в исходном коде. В исходном варианте зелёный цвет стоит перед бордовым и они в вашем решении оба имеют индекс 0. Поэтому и остаются в старом порядке. Для выхода из этой ситуации, я бы предложила заменить значения order у двух элементов: бордовому оставить 0, зелёному присвоить 1, а чёрному - 2.
тогда они встанут в нужном порядке.
.color-1{
align-self: center;
order: 2;
}
.color-2{
order: -1;
}
.color-3{
order: 1;
}
.color-4{
order: -1;
}
.color-5{
order: 0;
}
.color-6{
order: -1;
}
.color-7{
order: -1;
}Достаточно поменять порядок только у трех элементов
.palette {
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: center;
}
.color-1 {
order: 3;
}
.color-3 {
order: 2;
}
.color-5 {
order: 1;
}
Мой код на 100%:
.palette {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap-reverse;
}
.color-1 {
order: 6;
}
.color-2 {
}
.color-3 {
order: 5;
}
.color-4 {
order: 1;
}
.color-5 {
order: 4;
}
.color-6 {
order: 2;
}
.color-7 {
order: 3;
}