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

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

Здравствуйте! Подскажите пожалуйста, что я делаю не так? Дальше 98% уйти не получается.

.palette {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap-reverse;
    padding: 14px 0 13px 0;
}

.color-1 {
    align-self: flex-start;
    order: 1; /* тёмно-синий */
}

.color-2 {
    order: -5; /* light-blue */
}

.color-3 {
      order: -10; /* green */
}


.color-4 {    /* yellow */
    order: -6 ;
}

.color-5 {
      order: -9;  /* бордовый */
}

.color-6 {
      order: -7; /* светло-фиолетовый */
}


.color-7 {
    order: -8; /* фиолетовый */
}
2

Немного схитрил и достиг 100%, но ведь это явно не то, что нам нужно?

.palette {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    flex-wrap: wrap-reverse;
    padding: 14px 0 13px 0;
}

.color-1 {
    position: absolute;
    top: -1px;
    align-self: flex-start;
    margin-left: 1000px;
    order: 1; /* тёмно-синий */
}

.color-2 {
    order: -5; /* light-blue */
}

.color-3 {
    order: -10; /* green */
}

.color-4 {    /* yellow */
    order: -6 ;
}

.color-5 {
    order: -9;  /* бордовый */
}

.color-6 {
    order: -7; /* светло-фиолетовый */
}

.color-7 {
    order: -8; /* фиолетовый */
}
3

Понял :slight_smile:

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

.color-1 {
    align-self: flex-start;
    order: 1; /* тёмно-синий */
}

.color-2 {
    order: -5; /* light-blue */
}

.color-3 {
    order: -10; /* green */
}

.color-4 {    /* yellow */
    order: -6 ;
}

.color-5 {
    order: -9;  /* бордовый */
}

.color-6 {
    order: -7; /* светло-фиолетовый */
}

.color-7 {
    order: -8; /* фиолетовый */
}