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

Не понимаю, почему без “flex-wrap” ломается код и не работает “align-content”, оно (flex-wrap) ведь отвечает только за порядок следования…?

.palette {

display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
/flex-wrap: wrap-reverse;/


}

div > div {
width: 20px;
}

.color-1 {
order: 7;
}

.color-2 {
order: 6;
}

.color-4 {
order: 5;
}

.color-6 {
order: 4;
}

За порядок следования отвечает часть “reverse”. А за что отвечает “wrap”?

wrap в переводе - обертка, по смыслу - “перенос”. Факт в том что если убрать перенос (не связанный совершенно параметр) , то все падает. При чем, если заменить ‘align-content’ на ‘align-items’ то частично все же работать будет…

Это правило лишнее в вашем коде. Вы ищете ошибку не в том месте.

Ну я как бы сделал, просто не очень понял как:))
А правило написал, т.к. жс (который, как я понял, автоматически уменьшает задействованные дивы, не сработал.) Но это же правило во всяком случае ничего не ломает…?

Нет там никакого js. Есть стили, которые от вас скрыты. Посмотрите через инструменты разработчика в браузере.

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

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

align-items:center;
}
/*черный*/

.color-1 {
order:7;
}

/*синий*/

.color-2 {
order:5;
}

/*зеленый*/

.color-3 {
order:0;
}

/*желтый*/

.color-4 {
order:3;
}

/*коричневый*/

.color-5 {
order:0;
}

/*розовый */
.color-6 {
order:2;
}

/*фиолетовый*/

.color-7 {
order:1;
}

Если интересно еще почитать про flex-box

1 лайк
Такой вариант, вот.
.palette {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.color-1 {
  order: 7;
}
.color-2 {
  order: 6;
}
.color-4 {
  order: 5;
}
.color-6 {
  order: 1;
}

Сделал вот так!

.palette {
    display: flex;
    flex-direction: column; /* располагаем эл-ты в колонку */
    align-content: center; /* ВСЕ СОДЕРЖИМОЕ КОНТЕЙНЕРА ровняем по центру (доп ось)*/
    flex-wrap: wrap-reverse; /* разрешаем перенос (получается 2 колонки), и добавляем '-reverse' - меняются местами колонки */
    justify-content: center; /* ВСЕ СОДЕРЖИМОЕ КОНТЕЙНЕРА ровняем по центру (главная ось)*/
}
.color-1 {
    order: -1;
}
.color-2 {
    order: -2;
}
.color-3 {
    order: -7;
}
.color-4 {
    order: -3;
}
.color-5 {
    order: -6;
}
.color-6 {
    order: -4;
}
.color-7 {
    order: -5;
}

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

.color-1 {
order: 7;
}
.color-2 {
order: 6;

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

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

.color-1 {
  order: 3;
}
  
.color-3 {
  order: 2;
}

.color-5 {
  order: 1;
}

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

.color-1 {
order: 8;
}

.color-3 {
order: 7;
}

.color-5 {
order: 6;
}

Самое короткое решение на мой взгляд