[20/31] 100% оцените код

Курсы §35. Флексбокс, часть 1
1 
.palette {
  display: flex;
  align-items: center;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: center;
}
.color-1 {
  order: 7;
}
.color-2 {
  order: 1;
}
.color-3 {
  order: 6;
}
.color-4 {
  order: 2;
}
.color-5 {
  order: 5;
}
.color-6 {
  order: 3;
}
.color-7 {
  order: 4;
}
1 лайк
2

Может как то оптимальней можно?

3 
.color-1 {
order: 6;
}
.color-3 {
order: 5
}
.color-5 {
order: 4
}
4

Да так уже меньше кода можно и так действительно. А то что цифры order от 4 до 6 нормально? Не нужно ли стараться задать по порядку например 1, 2, 3. Так то понятно, что у всех по дефолту 0 и нужно либо меньше либо больше сделать для перестановок. Так то всем задал цифры только для порядка. Но видимо и правда это избыточно.

5

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

6

Спасибо. Учту в дальнейшем.

7

Привет всем)
А нужно ли здесь свойство?

align-items: center;

8

Да в принципе не нужно хватит и align-content: center так как несколько рядов. Написал его до flex-wrap: wrap-reverse, а потом и забыл убрать как не нужное.

9

Если правильно понял логику order, что мы при перестановках считаем от 0 и с учетом reverse-wrap перемещаем, кажется что такой порядок должен быть, а не как вы выше описали.

.color-1 {
  order: 6;
  }
  
.color-3 {
  order: 4;
  }

.color-5 {
  order: 2;
  }
10

Я решил так:
` .palette {
display: flex;
flex-wrap: wrap-reverse;
justify-content: center;
align-items: baseline;
align-content: center;
}

.color-1 {
order: 7;
}
.color-3 {
order: 5;
}
.color-5 {
order: 4;
}
`