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

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

Оцените код, пожалуйста

.palette-small {
    display: flex;
}
.palette-box:first-child  .palette-small {
    flex-direction: column-reverse;
    justify-content: center;
}
.palette-box:first-child .color-4 {
    order: -1;
    align-self: center;
}
.palette-box:first-child .color-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) .color-2,
.palette-box:nth-child(2) .color-6 {
    align-self: flex-end;
}
.palette-box:nth-child(3) .palette-small {
    flex-direction: row;
    justify-content: space-between;
}
.palette-box:nth-child(3) .part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.palette-box:last-of-type .palette-small {
    flex-direction: row;
    justify-content: space-between;
}
.palette-box:last-of-type .part {
    display: flex;
}
 .palette-box:last-of-type .part:last-child {
     flex-direction: column-reverse;
     justify-content: space-between;
 }
1 лайк
2

Хороший код. Осталось немного сократить, сгруппировав одинаковые свойства. Подумайте над этим.

3

я бы с удовольствием сократил, но вот только если рассуждать логически: если я объединю разные блоки и присвою им flex-direction: column-reverse, то когда я захочу потом исправить один из этих блоков, второй тоже пойдёт следом, разве не так?

4

Я имею в виду свойство display: flex; и возможно justify-content.

1 лайк
5

да, конечно, спасибо)

6

Вопрос по данному решению. Подскажите плиз, почему flex применяется к малому паллету palette-small, а не ко всему боксу с четырмя паллетами palette-box.

Также все боксы имеют одноименный класс palette-small и большой palette-box и вот тут

когда применяются свойства, они примеряются именно к нужному первому паллету, а не ко всем, хотя у них у всех есть вложенность palette-small в palette-box…

7

Ты лучший человек, спасибо тебе!

8 
.palette-small {
  display: flex; 
}

/*palette-1*/
.palette-box:nth-child(1) .palette-small {
  justify-content: center;
  flex-direction: column-reverse;  
}
.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-2*/
.palette-box:nth-child(2) .palette-small {
  justify-content: space-between;
  flex-direction: column-reverse;  
}
.palette-box:nth-child(2) .color-4, .palette-box:nth-child(2) .color-1 {
  align-self: flex-start;
}
.palette-box:nth-child(2) .color-6, .palette-box:nth-child(2) .color-2 {
  align-self: flex-end;
}

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

/*palette-3*/
.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-4*/
.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;
}