.palette .color-aqua {
margin: auto 0 auto 0;
height: 150px;
width: 50px;
}
Только я одного не понимаю: в описании к испытанию написано, что все отступы кратны 5, но у меня ни как не получается сделать так, чтобы все были кратны 5.
Очень красиво!
с шириной и высотой боксов все понятно, каждый их подобрал такими.
Расскажите, пожалуйста, подробно как Вы пришли к этой части кода:
.palette .color-olive {margin: auto 5px auto auto;}
.palette .color-yellow {margin: auto auto 5px 5px;}
.palette .color-fuchsia {margin: 5px 5px auto 5px;}
.palette .color-aqua {margin: auto auto auto 5px;}
Внешние блоки отцентрованы по верху и низу, значит вертикальный внешний отступ будет auto
У внутренних блоков есть auto отступ: у желтого сверху, у фуксии - снизу. Осталось разобраться: чо по горизонтали?
Малые блоки отстают от своих краев на глаз эдак 5px (ну мы знаем, что в курсе нам дают кратные 5 пикселям значения, так что чому нет?).
Между большим и малым блоком есть расстояние, и мы его можем на глаз (это мой любимый научный метод) определить в 10px, но памятуя о том, что во флексах маржины не складываются, определяем боковые маржины между большими и малыми блоками по 10/2=5px. Тут мы уже великолепны, т.к. определили у блоков 3 значения:
а) у больших верх-низ и до малого;
б) у малых верх-низ и до большого.
А теперь самое интересное: мы наблюдаем симметрию элементов - и тут пора бы задаться вопросом: почему? либо заданы симметричные значения маржинов из расчета ширины родительского флекса, либо же тут стоят auto. Но ширины родителя мы не знаем, глазомер сломался еще в 4 пункте, и нам остается подставить везде auto.
???
PROFIT!
З.Ы. по пункту 2 - на самом деле на глаз видно 10px, но если посмотрим в отладчик, то у родителя прописан скрытый стиль - внутренний отступ на те же 5px
по пункту 5 - в том же отладчике мы видим ширину в 295px, паддинг и пр. у родителя, но решение через auto более элегантное и было более правильным с точке зрения отображения на малых экранах.
Скрипт проверки так отрабатывает. Единственной правильной проверки для данного задания, пока не запилили, что по логике, не особо то не и надо. А что касается вашего кода, то не понятно, зачем вы задали ширину 1му блоку в 50px, когда визуально видно, что ширину изменять надо последнему, и пытаясь поймать лучший % прохождения, задали еще и левый отступ в 26px. Соответственно и другие блоки “поплыли”.
100%, но margin без кратности 5 для 1го и 2го блока.
.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
}
.color-olive,
.color-aqua {
height: 150px;
}
.color-yellow,
.color-fuchsia {
height: 100px;
}
.color-olive {
margin: auto 10px auto 31px;
}
.color-yellow {
margin: auto 37px 5px 0;
}
.color-fuchsia {
margin: 5px 10px auto 0;
}
.color-aqua {
width: 50px;
margin: auto 0 auto 0;
}
100%, но margin без кратности 5 для 1го и 4го блока.
.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
}
.color-olive,
.color-aqua {
height: 150px;
}
.color-yellow,
.color-fuchsia {
height: 100px;
}
.color-olive {
margin: auto 10px auto 31px;
}
.color-yellow {
margin: auto auto 5px 0;
}
.color-fuchsia {
margin: 5px 10px auto 0;
}
.color-aqua {
width: 50px;
margin: auto 32px auto 0;
}
100%, все margin кратны 5
.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
}
.color-olive,
.color-aqua {
height: 150px;
}
.color-yellow,
.color-fuchsia {
height: 100px;
}
.color-olive {
margin: auto 10px auto auto;
}
.color-yellow {
margin: auto auto 5px 0;
}
.color-fuchsia {
margin: 5px 10px auto 5px;
}
.color-aqua {
width: 50px;
margin: auto auto auto 0;
}
p.s Ясно что решений еще много, и отступы для блоков можно подгонять, столько раз, сколько вам религия позволяет, единственно, что я не понял, так у Valery_Sтут, зачем-то тоже задана ширина для 1го блока. Наверное данные посты делались еще до реворкинга заданий и курсов и этот был этот в том числе.
