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

Maksov · 24.Январь.2019 20:40:32

31/31

.part,
.palette-small {
  display: flex;
  justify-content: space-between;
}
.palette-box:first-child .palette-small {
  flex-direction: column-reverse; 
  justify-content: center;
}
.palette-box:first-child .color-3 {
  align-self: center;
  order: 1;
}
.palette-box:first-child .color-4 {
  align-self: center;
  order: -1;
}
.palette-box:nth-child(2) .palette-small,
.palette-box:nth-child(4) .part:last-child {
  flex-direction: column-reverse;
  justify-content: space-between;
}
.palette-box:nth-child(2) .color-2,
.palette-box:nth-child(2) .color-6 {
  align-self: flex-end;
}
.palette-box:nth-child(2) .color-1,
.palette-box:nth-child(2) .color-4 {
  align-self: flex-start;
}
.palette-box:nth-child(3) .part {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

rnrcross · 27.Март.2019 09:20:33

.palette-small {
display: flex;
}

.palette-box:first-child .palette-small{
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:first-child .palette-small .color-4{
order: -1;
align-self: center;
}

.palette-box:first-child .palette-small .color-3{
order: 5;
align-self: center;
}

.palette-box:nth-child(2) .palette-small{
flex-direction: column-reverse;
justify-content: space-between;
}

.palette-box:nth-child(2) .palette-small .color-1,
.palette-box:nth-child(2) .palette-small .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(2) .palette-small .color-6,
.palette-box:nth-child(2) .palette-small .color-2 {
align-self: flex-end;
}

.part {
display: flex;
}

.palette-box:nth-child(3) .palette-small{
justify-content: space-between;

}

.palette-box:nth-child(3) .palette-small .part{
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small{
justify-content: space-between;

}

.palette-box:nth-child(4) .palette-small .part:last-child{
flex-direction: column-reverse;
justify-content: space-between;
}

S3GA · 27.Ноябрь.2019 12:30:37

Всем доброго времени суток.
Если среди членов форума найдутся отзывчивые люди и объяснят мне, почему мне пришлось убить час времени на 4ый блок, и свойство “align-items: flex-end” заработало только тогда, когда я поставил width: 50% двум “.part”,
то Буду весьма признателен!
В теоретическом задании все работало (например в задании номер 7 работает, копирую от туда и не становятся они по flex-end… )…
challenge

/Первый блок/
.palette-box:first-child .palette-small {
display: flex;
flex-direction: column;
justify-content: center;
}

.palette-box:first-child .palette-small div:nth-child(2n) {
order: -1;
}

.palette-box:first-child .palette-small div:nth-child(n+2):nth-child(-n+3) {
align-self: center;
}
/Второй блок/
.palette-box:nth-child(2) .palette-small {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}

.palette-box:nth-child(2) .palette-small div:nth-child(n+1):nth-child(-n+2) {
align-self: flex-end;
}

.palette-box:nth-child(2) .palette-small div:nth-child(n+3):nth-child(-n+4) {
align-self: flex-start;
}
/Третий блок/
.palette-box:nth-child(3) .palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part:first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part:last-child {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/Четвертый блок/
.palette-box:last-child .palette-small {
display: flex;
}

.palette-box:last-child .palette-small .part:first-child {
display: flex;
width: 50%;

}

.palette-box:last-child .palette-small .part:last-child {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-end;
width: 50%;
}

sasha_sm · 27.Ноябрь.2019 14:26:07

Чтобы добиться верного положения элементов, нужно добавить свойство justify-content: space-between самой палитре .palette-box:last-child .palette-small. Свойство align-items у .part не нужно.

Shinji_Ikari256 · 19.Декабрь.2019 15:22:30

.palette-small, .part {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(1) .palette-small {
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:nth-child(1) .color-3 {
align-self: center;
order: 1;
}

.palette-box:nth-child(1) .color-4 {
align-self: center;
order: -1;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
align-items: flex-end;
}

.palette-box:nth-child(2) .color-1,
.palette-box:nth-child(2) .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(3) .part {
flex-direction: column;
}

.palette-box:nth-child(4) .part:nth-child(2) {
flex-direction: column-reverse;
}

kastiell93 · 08.Август.2020 12:24:27

.palette-small {
display: flex;
}

/* Первая палетка */

.palette-box:nth-child(1) .palette-small {
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:nth-child(1) .palette-small div:nth-child(2) {
order: 1;
align-self: center;
}

.palette-box:nth-child(1) .palette-small div:nth-child(3) {
order: -1;
align-self: center;
}

/* Вторая палетка */

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-start;
}

.palette-box:nth-child(2) .palette-small div:nth-last-child(n+3)

{
align-self: flex-end;
}

/* Третья палетка */

.palette-box:nth-child(3) .palette-small {
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part {
display: flex;
flex-direction: column;
justify-content: space-between;
}

/* Четвертая палетка */

.palette-box:nth-child(4) .palette-small {
justify-content:space-between;
}

.palette-box:nth-child(4) .palette-small .part:first-child {
display: flex;
}

.palette-box:nth-child(4) .palette-small .part:last-child {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}

hunt4r · 10.Август.2020 13:40:16

.palette-small{
display: flex;
}
.palette-box:first-child .palette-small{
flex-direction: column;
justify-content: center;
}
.palette-box:first-child .color-2{
order: 1;
}
.palette-box:first-child .color-4{
order: 2;
align-self: center;
}
.palette-box:first-child .color-3{
align-self: center;
}
.palette-box:nth-child(2) .palette-small{
flex-direction: column-reverse;
justify-content: space-between;
}
.palette-box:nth-child(2) .color-1,
.palette-box:nth-child(2) .color-4{
align-self: flex-start;
}
.palette-box:nth-child(2) .color-6,
.palette-box:nth-child(2) .color-2{
align-self: flex-end;
}
.palette-box:nth-child(3) .palette-small{
justify-content: space-between;
}
.palette-box:nth-child(3) .part{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.palette-box:nth-child(4) .palette-small{
justify-content: space-between;
}
.palette-box:nth-child(4) .part{
display: flex;
}
.palette-box:nth-child(4) .part:last-child{
flex-direction: column-reverse;
justify-content: space-between;
}

NexoOne · 11.Август.2020 18:11:37

Вот мой)

.palette-small{
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}

.palette-box:nth-of-type(1) .palette-small{
justify-content: center;
}

.palette-box:nth-of-type(1) .palette-small div:nth-child(2),
.palette-box:nth-of-type(1) .palette-small div:nth-child(3){
align-self: center;
}

.palette-box:nth-of-type(1) .palette-small div:nth-child(2){
order: 1;
}

.palette-box:nth-of-type(1) .palette-small div:nth-child(3){
order: -1;
}

.palette-box:nth-of-type(2) .palette-small div:nth-child(3),
.palette-box:nth-of-type(2) .palette-small div:nth-child(4){
align-self: flex-start;
}

.palette-box:nth-of-type(2) .palette-small div:nth-child(1),
.palette-box:nth-of-type(2) .palette-small div:nth-child(2){
align-self: flex-end;
}

.palette-box:last-of-type .palette-small{
display: flex;
flex-direction: row;
justify-content: space-between;
}

.palette-box:nth-last-of-type(2) .palette-small{
display: flex;
flex-direction: row;
justify-content: space-between;
}

.part{
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:last-of-type .part:first-child{
display: flex;
flex-direction: row;
}

.palette-box:last-of-type .part:last-child{
flex-direction: column-reverse;
}

Danlee · 27.Октябрь.2020 05:29:29

Вот мой вариант прохождения на 100%

.palette-box:nth-child(1) .palette-small {
display: flex;
flex-direction: column;
justify-content: center;
}

.palette-box:nth-child(1) .color-4, .palette-box:nth-child(1) .color-2 {
order: 1;
}

.palette-box:nth-child(1) .palette-small div:nth-child(n + 2):not(:nth-child(4)) {
align-self: center;
}

.palette-box:nth-child(2) .palette-small {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-end;
}

.palette-box:nth-child(2) .palette-small div:nth-child(n + 3) {
align-self: flex-start;
}

.palette-box:nth-child(3) .palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
}

.palette-box:nth-child(4) .palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small .part {
display: flex;
}

.palette-box:nth-child(4) .palette-small .part:last-child {
display: flex;
justify-content: space-between;
flex-direction: column-reverse;
align-items: flex-start;
}

tatty79 · 27.Октябрь.2020 14:39:59

100%
всегда рада замечаниям и поправкам

.palette-small, .part {
display: flex;
justify-content: space-between;
}

.part { flex-direction: column; }

.palette-box:nth-child(1) .palette-small {
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:nth-child(1) .color-3 {
align-self: center;
order: 1;
}

.palette-box:nth-child(1) .color-4 {
align-self: center;
order: -1;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
align-items: flex-end;
}

.palette-box:nth-child(2) .color-1,
.palette-box:nth-child(2) .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(4) .part:nth-child(1) {
flex-direction: row;
}

.palette-box:nth-child(4) .part:nth-child(2) {
flex-direction: column-reverse;
}

Legat · 25.Ноябрь.2020 09:25:04

.palette-small {
display: flex;
}

.palette-box:first-child .palette-small{
flex-direction: column;
justify-content: center;
}

.palette-box:first-child .palette-small .color-2,
.palette-box:first-child .palette-small .color-4 {
order: 1;
}

.palette-box:first-child .palette-small .color-3,
.palette-box:first-child .palette-small .color-4 {
align-self: center;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
justify-content: space-between;
}

.palette-box:nth-child(2) .palette-small .color-1,
.palette-box:nth-child(2) .palette-small .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6 {
align-self: flex-end;
}

.palette-box:nth-child(3) .palette-small,
.palette-box:last-child .palette-small {
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:last-child .palette-small .part {
display: flex;
}

.palette-box:last-child .palette-small .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
}

Oleg40 · 06.Декабрь.2020 18:17:40

У меня так вот вышло.

.palette-small,
.part {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(1) .palette-small {
flex-direction: column;
justify-content: center;
}

.palette-box:nth-child(1) .color-2 {order: 3;}
.palette-box:nth-child(1) .color-3 {order: 1; align-self: center;}
.palette-box:nth-child(1) .color-4 {order: 4; align-self: center;}
.palette-box:nth-child(1) .color-5 {order: 2;}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
}

.palette-box:nth-child(2) .color-1{align-self: flex-start;}
.palette-box:nth-child(2) .color-4 {align-self: flex-start;}
.palette-box:nth-child(2) .color-6 {align-self: flex-end;}
.palette-box:nth-child(2) .color-2 {align-self: flex-end;}

.palette-box:nth-child(3) .part {flex-direction: column;}

.palette-box:nth-child(4) .part:nth-child(2){flex-direction: column-reverse;}

EvgenegvE · 15.Февраль.2021 17:14:35

.palette-small,
.palette-box .part {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(1) .palette-small { /* 1 okno */
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:nth-child(1) .color-4 { /* 1 okno */
align-self: center;
order: -1;
}

.palette-box:nth-child(1) .color-3 { /* 1 okno */
align-self: center;
order: 1;
}

.palette-box:nth-child(2) .palette-small { /* 2 okno */
flex-direction: column-reverse;
}

.palette-box:nth-child(2) .color-1, /* 2 okno */
.palette-box:nth-child(2) .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(2) .color-6, /* 2 okno */
.palette-box:nth-child(2) .color-2 {
align-self: flex-end;
}

.palette-box:nth-child(3) .part { /* 3 okno */
flex-direction: column ;
}

.palette-box:nth-child(4) .part:last-child { /* 4 okno */
flex-direction: column-reverse;
}

Mirosite · 20.Март.2021 15:37:03

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

.color-1 { 
  align-self: flex-start;
  order: 1;
}

.color-2 { 
  align-self: center;
  order: -2;
}

.color-1,
.color-2,
.color-3,
.color-4,
.color-5,
.color-6,
.color-7 {
  align-self: center;
}

Дальше было лень переставлять шарики

pitbrest · 22.Март.2021 07:12:21

div:nth-of-type(1) .palette-small {
display:flex;
justify-content:center;
align-content: center;
align-items:center;
flex-direction:column;
}

div:nth-of-type(1) .palette-small .color-2 {
order:3;
align-self:stretch;
}

div:nth-of-type(1) .palette-small .color-3 {
order:1;
}

div:nth-of-type(1) .palette-small .color-4 {
order:4;
}

div:nth-of-type(1) .palette-small .color-5 {
order:2;
align-self:stretch;
}

div:nth-of-type(2) .palette-small {
display:flex;
justify-content:space-between;
align-content: center;
flex-direction:column;
}

div:nth-of-type(2) .palette-small .color-2 {
order:4;
align-self:flex-end;
}

div:nth-of-type(2) .palette-small .color-6 {
order:3;
align-self:flex-end;
}

div:nth-of-type(2) .palette-small .color-4 {
order:2;
align-self:flex-start;
}

div:nth-of-type(2) .palette-small .color-1 {
order:1;
align-self:flex-start;
}

div:nth-of-type(3) .palette-small {
display:flex;
justify-content:space-between;
}

div:nth-of-type(3) .palette-small .part{
display:flex;
flex-direction:column;
justify-content:space-between;
align-content: center;
align-items:center;
}

div:nth-of-type(4) .palette-small {
display:flex;
justify-content:space-between;
}

div:nth-of-type(4) .palette-small div:nth-of-type(1) {
display:flex;
justify-content:space-between;
}

div:nth-of-type(4) .palette-small div:nth-of-type(2) {
display:flex;
flex-direction:column-reverse;
justify-content:space-between;
}

Не слишком ли большим код получился? Кто шарит, подскажите пжл…

Spoki4 · 27.Апрель.2021 20:31:04

Я так понимаю, что нагородил много лишнего. Был бы благодарен, если бы указали, как можно сократить код

.palette-small {
  display: flex;
  flex-direction: column;
}

.palette-box:nth-child(1) .palette-small {
  justify-content: center;
}

.palette-box:nth-child(1) .color-2 {
  order: 1;
}

.palette-box:nth-child(1) .color-3 {
  order: -1;
  align-self: center;
}

.palette-box:nth-child(1) .color-4 {
  order: 2;
  align-self: center;
}

.palette-box:nth-child(2) .palette-small {
  justify-content: space-between;
}

.palette-box:nth-child(2) .color-6 {
  order: 1;
  align-self: flex-end;
}

.palette-box:nth-child(2) .color-4 {
  order: 0;
  align-self: flex-start;
}

.palette-box:nth-child(2) .color-1 {
  order: -1;
  align-self: flex-start;
}

.palette-box:nth-child(2) .color-2 {
  order: 2;
  align-self: flex-end;
}

.palette-box:nth-child(3) .palette-small {
  flex-direction: row;
  justify-content: space-between;
}

.palette-box:nth-child(3) .part:nth-child(1),
.palette-box:nth-child(3) .part:nth-child(2) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small {
  flex-direction: row;
  justify-content: space-between;
}

.palette-box:nth-child(4) .part:nth-child(1) {
  display: flex;
}

.palette-box:nth-child(4) .part:nth-child(2) {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
}

Varvaron · 14.Июнь.2021 07:07:33

Чтобы пройти испытание на 92%, достаточно такого кода:

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

.color-1 {
order: 1;
}

Дальше можно играть с порядком цветов, чтобы добить 100%

smus · 05.Июль.2021 12:21:43

Последовательно, с небольшими комментариями

.palette-box .palette-small{
display:flex
}
/first square/
.palette-box:nth-child(1) .palette-small{
flex-direction:column;
justify-content:center;
}
.palette-box:nth-child(1) .palette-small .color-2{
/blue/
order:1
}
.palette-box:nth-child(1) .palette-small .color-3{
/green/
align-self:center
}
.palette-box:nth-child(1) .palette-small .color-4{
/yellow/
align-self:center;order:2
}
.palette-box:nth-child(1) .palette-small .color-5{
/brown/
}
/second square/
.palette-box:nth-child(2) .palette-small{
flex-direction:column;
justify-content:space-between;
}
.palette-box:nth-child(2) .palette-small .color-2{
/blue/
align-self:flex-end;order:1
}
.palette-box:nth-child(2) .palette-small .color-6{
/pink/
align-self:flex-end
}
.palette-box:nth-child(2) .palette-small .color-4{
/yellow/
align-self:flex-start;order:-1
}
.palette-box:nth-child(2) .palette-small .color-1{
/black/
align-self:flex-start;order:-2
}

/third square/
.palette-box:nth-child(3) .palette-small{
flex-direction:row;
justify-content:space-between
}
.palette-box:nth-child(3) .palette-small .part{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:space-between
}
.palette-box:nth-child(3) .palette-small .color-1{
/black/
align-self:flex-start;
}
.palette-box:nth-child(3) .palette-small .color-3{
/green/
align-self:flex-start
}
.palette-box:nth-child(3) .palette-small .color-4{
/yellow/
align-self:flex-end
}
.palette-box:nth-child(3) .palette-small .color-6{
/pink/
align-self:flex-end;order:1
}

/fourth square/
.palette-box:nth-child(4) .palette-small{
flex-direction:row;
justify-content:space-between
}
.palette-box:nth-child(4) .palette-small .part{
display:flex;
}
.palette-box:nth-child(4) .palette-small .part:nth-child(1){
flex-direction:row;
justify-content:space-around
}
.palette-box:nth-child(4) .palette-small .part:nth-child(2){
flex-direction:column;
justify-content:space-between
}
.palette-box:nth-child(4) .palette-small .color-7{
/purple/
align-self:stretch;
}
.palette-box:nth-child(4) .palette-small .color-4{
/yellow/
align-self:stretch
}
.palette-box:nth-child(4) .palette-small .color-2{
/blue/
align-self:flex-end
}
.palette-box:nth-child(4) .palette-small .color-3{
/green/
align-self:flex-end;order:-1
}

Riddem · 12.Август.2021 20:19:57

Мой вариант на 100%

.palette-small {
display: flex;
}

.palette-small:only-child {
flex-direction: column;
}
/Первый квадрат/
.palette-box:first-of-type .palette-small {
justify-content: center;
}
.palette-box:first-of-type .palette-small .color-3 {
order: 1;
align-self: center;
}
.palette-box:first-of-type .palette-small .color-5 {
order: 2;
}
.palette-box:first-of-type .palette-small .color-2 {
order: 3;
}
.palette-box:first-of-type .palette-small .color-4 {
order: 4;
align-self: center;
}
/Второй квадрат/
.palette-box:nth-of-type(2) .palette-small {
justify-content: space-between;
}
.palette-box:nth-of-type(2) .palette-small .color-1 {
align-self: flex-start;
order: 1;
}
.palette-box:nth-of-type(2) .palette-small .color-4 {
order: 2;
align-self: flex-start;
}
.palette-box:nth-of-type(2) .palette-small .color-6 {
order: 3;
align-self: flex-end;
}
.palette-box:nth-of-type(2) .palette-small .color-2 {
order: 4;
align-self: flex-end;
}
/Третий квадрат/
.palette-box:nth-of-type(3) .palette-small{
flex-direction: row;
justify-content: space-between;
}

.palette-small:first-of-type .part {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-of-type(4) .palette-small {
flex-direction: row;
justify-content: space-between;
}
.palette-box:nth-of-type(4) .palette-small .part:first-child {
flex-direction: row;
}
.palette-box:nth-of-type(4) .palette-small .part:not(:first-child) {
flex-direction: column;
}

.palette-box:nth-of-type(4) .palette-small .color-2 {
order: 2;
}
.palette-box:nth-of-type(4) .palette-small .color-3 {
order: 1;
}
.palette-box:nth-of-type(4) .palette-small .color-7 {
order: 3;
}
.palette-box:nth-of-type(4) .palette-small .color-4 {
order: 4;
}

DM18 · 14.Октябрь.2021 14:20:31

Минимум кода, 100%.

.palette-small, .part {
display: flex;
}
/Первая/
.palette-box:nth-child(1) .palette-small {
flex-direction: column;
justify-content: center;
}

.palette-box:nth-child(1) .color-3 {
order: -2;
align-self: center;
}

.palette-box:nth-child(1) .color-4 {
order: 1;
align-self: center;
}

.palette-box:nth-child(1) .color-5 {
order: -1;
}
/Вторая/
.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-start;
}

.palette-box:nth-child(2) .color-2 {
align-self: flex-end;
}

.palette-box:nth-child(2) .color-6 {
align-self: flex-end;
}
/Третья/
.palette-box:nth-child(3) .palette-small {
justify-content: space-between;
}

.palette-box:nth-child(3) .part {
flex-direction: column;
justify-content: space-between;
}
/Четвертая/
.palette-box:nth-child(4) .palette-small {
justify-content: space-between;
}

.palette-box:nth-child(4) .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
}