100% Испытание: кубизм [6/28]

Курсы §36. Флексбокс, часть 2
1 
.palette div {
    min-width: 35px;
    min-height: 35px;
}
.palette {
    display: flex; 
    padding:10px 22px 10px 22px;
}
.color-olive, .color-aqua {
   width: 50px;
   height: 150px;
   margin:auto;
}
.color-yellow, .color-fuchsia {
   height: 100px;    
}
.color-yellow {
    margin-top: auto; 
    margin-right:32px;
}

Мало кода, но без кратности 5

2
3

При решении по правилам задания не намного больше кода получается.

.palette div {
min-width: 35px;
min-height: 35px;
height: 100px;
margin: 5px;
}
.palette {
display: flex;
}
.palette .color-olive,
.palette .color-fuchsia {
margin-left: auto;   
}
.palette .color-aqua {
margin-right: auto;
}
.palette .color-olive,
.palette .color-aqua {
width: 50px;
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.palette .color-yellow {
margin-top: auto;
}
6 лайков
4

.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
flex-direction: row;
}
.color-olive {
width: 50px;
margin: auto 10px auto 26px;
height: 150px;
}
.color-aqua {
width: 50px;
margin: auto 26px auto 10px;
height: 150px;
}
.color-yellow {
margin: 170px 32px 5px 0px;
}
.color-fuchsia {
margin: 5px 0px 170px 0px;
}

1 лайк
5 
.palette {
     display: flex;     
}



.palette div {   
    min-width: 35px;
    min-height: 35px;  
    height: 100px;
    margin: 5px;
}

.palette [class$="olive"],
.palette [class$="fuchsia"] {
    margin-left: auto;
}

.palette [class$="aqua"] {
    margin-right: auto;
}



.palette [class$="yellow"] {
    margin-top: auto;
}

.palette [class$="olive"],
.palette [class$="aqua"] {
    width: 50px;
    height: 150px;
    margin-top: auto;
    margin-bottom: auto;
}
2 лайка