HTML Academy Флексбокс, часть 1 / Испытание: сложные палитры [31/31] Как сократить код?!

[Globomen]

Выполнил задание, пришлось повозиться, результат 100%, но код получился длинный.

Задание интересное, сразу показало где у меня “бреши” в знаниях, не скрою подсматривал на форуме, но пытался сохранить свою логику чтобы понимать что от чего зависит. В одной из тем, прочитал что можно сократить код до 40 строк, интересно как это сделать.

Вопрос: Как сократить код?!

Стили:

.palette-small, .part {
    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) .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;
}

[Ineska]

Полистайте вниз, там несколько вариантов.

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

как-то так получилось .palette-small { display: flex; } .part { display: flex; } .palette-box:first-child .palette-small { flex-direction: column; padding-top: 12px; } .palette-box:first-child .color-3, .palette-box:first-child .color-4 { width: 10px; align-self: center; } .palette-box:first-child .color-3 { order: -1; } .palette-box:first-child .color-4 { order: 3; } .palette-box:first-child .color-2 { order: 2; } .palette-box:nth-child(2) .palette-small { flex-directi…

[doodle-sack-fd]

Для меня задание казалось сложным, а на самом деле вся тяжесть даже не во флексах, а в селекторах
Внимательно следите за вложенностью!

/* 1й квадрат */

.palette-small{
display:flex;
}
.palette-box:first-child .palette-small{
flex-direction: column-reverse;
justify-content: space-around;
}
.palette-box:first-child .palette-small .color-4{
order:-1;
align-self:center;
}
.palette-box:first-child .palette-small .color-5{
order:5;
align-self:center;
}

/* 2й квадрат */

.palette-box:nth-child(2) .palette-small{
flex-direction:column-reverse;
justify-content:space-around;
}
.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;
}

/* 3й квадрат */

.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;
}

/* 4й квадрат */

.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;
justify-content:space-between;
}

[raito]

Пожалуй, тоже оставлю свой сокращенный вариант тут. Возможно, кому-то интересно будет:

.palette-small, 
.palette-small .part{
  display: flex;
}

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

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

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

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

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

.palette-box:nth-child(n+2) .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 .part:nth-child(1) {
  flex-direction: row;
}

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

[MaxGenn]

И я поделюсь оптимизированным кодом (исходный вариант был длиннее) - результат 100%:

.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-3 {
  order: -1;
  align-self: center;
  }
.palette-box:nth-child(1) .color-4 {
  order: 2;
  align-self: center;
  }
.palette-box:nth-child(1) .color-2 {
  order: 2;
  } /*лево-верх: конец*/
  /*право-верх: начало*/
.palette-box:nth-child(2) .palette-small {
  flex-direction: column-reverse;
  }
.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) .palette-small > .part {
  flex-direction: column;
  } /*лево-низ: конец*/
  /*право-низ: начало*/    
  .palette-box:nth-child(4) .part:last-child {
  flex-direction: column-reverse;
  } /*право-низ: конец*/