Оцените код пожалуйста! 6/28.

.palette {
display: flex;
}

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

.palette .color-olive {
width: 50px;
height: 150px;
margin: auto 10px auto 26px;
}

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

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

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

Только я одного не понимаю: в описании к испытанию написано, что все отступы кратны 5, но у меня ни как не получается сделать так, чтобы все были кратны 5.

.palette {display: flex;}

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

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

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

.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;}
4 лайка

Спасибо, я понял свою ошибку, но зачем было разбивать каждый селектор на два отдельных?

http://htmlbook.ru/samcss/gruppirovanie

Ясно, спасибо!

Очень красиво!
с шириной и высотой боксов все понятно, каждый их подобрал такими.
Расскажите, пожалуйста, подробно как Вы пришли к этой части кода:

.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;}
  1. Внешние блоки отцентрованы по верху и низу, значит вертикальный внешний отступ будет auto
  2. У внутренних блоков есть auto отступ: у желтого сверху, у фуксии - снизу. Осталось разобраться: чо по горизонтали?
  3. Малые блоки отстают от своих краев на глаз эдак 5px (ну мы знаем, что в курсе нам дают кратные 5 пикселям значения, так что чому нет?).
  4. Между большим и малым блоком есть расстояние, и мы его можем на глаз (это мой любимый научный метод) определить в 10px, но памятуя о том, что во флексах маржины не складываются, определяем боковые маржины между большими и малыми блоками по 10/2=5px. Тут мы уже великолепны, т.к. определили у блоков 3 значения:
    а) у больших верх-низ и до малого;
    б) у малых верх-низ и до большого.
  5. А теперь самое интересное: мы наблюдаем симметрию элементов - и тут пора бы задаться вопросом: почему? либо заданы симметричные значения маржинов из расчета ширины родительского флекса, либо же тут стоят auto. Но ширины родителя мы не знаем, глазомер сломался еще в 4 пункте, и нам остается подставить везде auto.
  6. ???
  7. PROFIT!

З.Ы. по пункту 2 - на самом деле на глаз видно 10px, но если посмотрим в отладчик, то у родителя прописан скрытый стиль - внутренний отступ на те же 5px
по пункту 5 - в том же отладчике мы видим ширину в 295px, паддинг и пр. у родителя, но решение через auto более элегантное и было более правильным с точке зрения отображения на малых экранах.

(помня) Беларусь или Украина? :wink:

ни туды, ни сюды =) Россия

Мой код на 100%

.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;
}

Скрипт проверки так отрабатывает. Единственной правильной проверки для данного задания, пока не запилили, что по логике, не особо то не и надо. А что касается вашего кода, то не понятно, зачем вы задали ширину 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го блока. Наверное данные посты делались еще до реворкинга заданий и курсов и этот был этот в том числе.