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

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

100% , но хз насколько код адекватен

.palette div {
min-width: 35px;
min-height: 35px;
margin-right: 10px;
}

.palette {
display: flex;
padding: 0 37px 0 36px;

}

.color-olive {

margin: auto 0;
height:150px;
}

.palette .color-aqua {
width: 50px;
margin: auto 0;
height:150px;
margin-right: 0;
}

.color-fuchsia {
margin-left: auto;
margin-bottom: auto;
height: 100px;
margin-top: 10px;
}

.color-yellow {
margin-bottom: 10px;
margin-top: auto;
height: 100px;
}

2

переделал :smiley:

.palette div {
min-width: 35px;
min-height: 35px;

}

.palette {
display: flex;

}

.color-olive {
margin: auto 10px auto auto;
height:150px;
}

.color-yellow {
height: 100px;
margin: auto auto 5px 0;
}

.color-fuchsia {
height: 100px;
margin: 5px 5px auto 5px;
}

.color-aqua {
width: 50px;
height: 150px;
margin: auto auto auto 5px;
}

3

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

.palette {
display: flex;
}

.color-olive {
margin-top:auto;
margin-bottom:auto;
height: 150px;
margin-left:auto;
}

.color-yellow {
margin-top:auto;
margin-bottom:5px;
height: 100px;
margin-left:10px;
margin-right:5px;
}

.color-fuchsia {
margin-top: 5px;
margin-bottom:auto;
height: 100px;
margin-left:auto;
}

.color-aqua {
margin-top: auto;
margin-bottom:auto;
height: 150px;
margin-left:10px;
flex-basis:50px;
margin-right:auto;
}