Почему у желтого margin-right: auto; , а у фуксии нет свойства margin-left: auto?
Также можно было задать margin-left: auto только фуксии, а margin-right: auto желтому не указывать.
Почему такое поведение, ведь по логике они должны выравняться по центру только если и у желтого и у фуксии маржины влево и вправо соответственно?
Можно поинтересоваться, почему общий маргин задается селектору атрибутов именно таким образом [class^=“color”]?
Когда первый раз делал задавал свойство-значение просто контейнеру div, затем этому же контейнеру, но с уточнением селектора атрибутов. Но результат не получался и все фигуры улетали вверх-влево.
Пишу свой вариант кода сюда, потому что эта тема первая в выдаче Google.
Но когда я искал ответ и логику решения данного задания, здесь всего этого я так и не нашёл.
Как мне кажется, моё решение именно такое, какое подразумевали создатели, и через него Вы сможете понять, что конкретно от Вас требуется при прохождении испытания:
.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
}
.color-olive {
margin: auto 5px auto auto;
height: 150px;
}
.color-yellow {
margin: auto 5px 5px 5px;
height: 100px;
}
.color-fuchsia {
margin: 5px 5px auto auto;
height: 100px;
}
.color-aqua {
margin: auto auto auto 5px;
height: 150px;
flex-basis: 50px;
}
Надеюсь, кому-нибудь этот пост действительно поможет
Видимо ранее задание отличалось, подправил код под текущее задание.
Правда не совсем понятно для чего к классу color-aqua применять flex-basis, когда он и на width прекрасно реагирует.
