[20/31] Испытание: палитра посложнее 100%

Курсы §35. Флексбокс, часть 1
1

.palette{
display: flex;
flex-direction:column;
flex-wrap: wrap-reverse;
justify-content: center;
align-items: flex-end;
}

.color-1{
order: 11;
align-self: flex-start;
}
.color-2{
order: 10;
}
.color-3{
order: 5;
}
.color-4{
order: 9;
}
.color-5{
order: 6;
}
.color-6{
order: 8;
}
.color-7{
order: 7;
}

Какие варианты решения есть ещё? Какие минусы есть в этом варианте решения?

2

Какие варианты еще есть: http://forum.academy/c/kursy/35-flexbox-1
Минусы очевидны. Вы устанавливаете порядок каждого элемента в отдельности.
В задании всего 7 элементов. А если будет 20 например? Двадцать правил в css. Неоправданно “раздувается” css.

1 лайк
3

А что если так?

.palette {
display: flex;
flex-direction: column-reverse;
justify-content: center;
flex-wrap: wrap-reverse;
align-content: center;
}

.color-1 {
order: 5;
}

.color-3 {
order: 4;
}

.color-4 {
order:0;
}

.color-5 {
order: 3;
}

4

.palette{
display:flex;
flex-direction:column;
justify-content:center;
flex-wrap:wrap-reverse;
align-content:center;
}

.color-1 {
order: 10;
}

.color-2 {
order: 9;
}

.color-4 {
order: 8;
}

.color-6 {
order: 7;
}

5

.palette {
display: flex;
flex-direction: column-reverse;
justify-content: center;
flex-wrap: wrap-reverse;
align-content: center;
}
.color-1 {
order:7
}
.color-3 {
order:6
}
.color-5{
order:5
}

3 лайка
6

А как сделать без order?

7

Более короткий и 100% рабочий код:

.palette {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  align-content: center;
}

.color-1 {
  order: 7;
}

.color-3 {
  order: 6; 
}

.color-5 {
  order: 5; 
}
8

Тоже интересно, есть ли вариант без order.