[31/31] 100%-очень хороший код

Курсы §35. Флексбокс, часть 1
1 
        /*Общие условия*/

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

        /*first item*/

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

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

        /*two item*/

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

}
.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(2) .palette-small .color-4,
.palette-box:nth-child(2) .palette-small .color-1{
align-self: flex-start;
}

        /*three item and*/

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

        /*four item*/

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

1 лайк
2

Не понял механизм действия этой части. Может кто разъяснить?

3

Можно немного сократить.

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

.palette-box:nth-child(-n+2) .palette-small,
.palette-box:nth-child(4) .palette-small .part:last-child {
     flex-direction: column-reverse;}

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

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

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

.palette-box:nth-of-type(2) .palette-small {
    align-items: flex-start;}

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

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

Надо было назвать: “очень хороший код, написанный - очень, очень, самым, самым великим аФтором”.