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


#1

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


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

#3

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


#4

http://htmlbook.ru/samcss/gruppirovanie


#5

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


#6

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

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

#7
  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 более элегантное и было более правильным с точке зрения отображения на малых экранах.


#8

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


#9

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