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

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

Я так понимаю, что в данном задании необходимо использовать flex-basis, но сделала без. Есть смысл вообще его здесь использовать? Если да, то как?

.palette div {
    min-width: 35px;
    min-height: 35px;
}
.palette {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.color-olive {
    width: 50px;
    height: 150px;
    margin: auto;
    margin-right: 5px;
}
.color-yellow {
    height: 100px;
    margin-top: auto;
    margin-bottom: 5px;
    margin-left: 5px;

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

}
.color-aqua {
    width: 50px;
    height: 150px;
    margin: auto;
    margin-left: 10px;
}
2

"Flex-basis — задаёт базовый размер флекс-элемента или размер вдоль главной оси.
Если flex-basis не задан или его значение равно auto, то базовый размер берётся из width или height.

Свойство flex-basis принимает те же значения, что и width/height.

Свойство flex-basis «сильнее» свойств width и height, и если у флекс-элемента заданы все три свойства, то flex-basis переопределит либо ширину, либо высоту в зависимости от направления главной оси" — это из теории 5 урока части 2 по флексбоксам.

Можно сделать вывод, что flex-basis во флексах использовать правильнее, чем width/height.

И, кстати, у вас flex-direction: row стоит, здесь эта строка лишняя, так как она и так назначена по-умолчанию.

И еще у вас margin-left: 32px, что противоречит условиям задания. Размеры должны быть кратны 5.

3

но с 32px действительно 100% получается. А такого быть не должно в теории