HTML Academy Флексбокс, часть 2 / Испытание: кубизм [6/28] 94% на margin: auto; Как исправить?!

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

Попробовал все сделать на margin: auto; как здесь неоднократно писали, что-то все постоянно съезжает, то одну пару элементов выровняю, вторая съедет, то со второй парой элементов та же история.

Вопрос: Как выполнить задание только используя margin: auto;?

Стили:

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

.palette {
    display: flex;   
    box-sizing: border-box;
    padding: 10px;
}

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

.color-yellow, .color-fuchsia {
    height: 100px;   
}

.color-olive {  
}

.color-aqua { 
}

.color-yellow {
    margin-top: auto;
    margin-right: auto;   
}

.color-fuchsia {
    margin-left: auto;
    margin-bottom: auto;
}

Скрин

2

Решил задачу, не правильно понял комментарии на форуме, думал вообще не нужно значения в “px” использовать в отступах (margin), помучился час с лишним. Психанул и с нова перечитал задачу и сделал все с нуля согласно условиям. Все кратно 5, результат 100%.

Совет всем: Читайте внимательно условия задачи и не бойтесь начинать писать код с нуля!

Стили:

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

.palette {
    display: flex; 
    padding: 10px 15px;
}

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

.color-yellow, .color-fuchsia {
    height: 100px;
}

.color-olive {
    margin-left: auto;
}

.color-yellow {
    margin: auto auto 0 10px;
}

.color-fuchsia {
    margin: 0 10px auto auto;
}

.color-aqua {
    margin-right: auto;
}
3
Оно? 
.palette {
display: flex;
}

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

.palette div:nth-child(odd) {
margin-left: auto;
}

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

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

.palette div:nth-child(3n+1) {
margin-top: auto;
margin-bottom: auto;
flex-basis: 50px;
height: 150px;
}
1 лайк
4

Да, это уже намного ближе.

Но в вашем решении есть один margin с значением в “px”.

Можно решить задачу без margin с значением в “px”?