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

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

1
1.PNG1715×970 266 KB
Можете помочь, почему у меня подсвечиваются боковые стороны у элементов. Я пытался подогнать им ширину, но это невозможно. Я понимаю что нужно написать какой-то другой код тут, подскажите плиз. И ещё как прятать код на форуме, видел то что код открывается и закрывается на форуме, тоже помогите)

.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
}
.color-olive,
.color-aqua {
width: 40px;
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.color-fuchsia,
.color-yellow {
height: 100px;
}

.color-yellow {
margin-top: auto;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 10px;
}

.color-fuchsia {
margin-right: 10px;
margin-left: auto;
margin-top: 5px;
}

.color-olive {
margin-left: auto;
}

.color-aqua {
margin-right: auto;
}

2

дело не в ширине, а в боковых отступах. подумайте еще.

3

Не получается

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

.color-yellow {
    margin: auto auto 5px 0;
}

.color-fuchsia {
    margin: 5px 10px auto 5px;
}

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

ну вообще ладно, у одного все же надо ширину прописать явно
прост немного поменяли задание, раньше вроде они все были одинаковые по ширине

5

Подскажите пожалуйста, как вы прячете код в такое отдел с кнопкой.

6

image
image.png946×456 27.1 KB

7

Благодарю

8

Здравствуйте! Не могли бы вы объяснить почему у Желтого столбца справа маргин авто, а у Фуксии слева маргин 5px?

9
1 лайк
10

И всё же… Может я не догоняю… Мне непонятен вот этот момент:

.color-yellow {
margin: auto auto 5px 0;
}

.color-fuchsia {
margin: 5px 10px auto 5px;
}

У желтого справа авто, у фуксии слева 5.

11

У меня получилось добиться 100%. Но отступы не кратно 5, как в задании было указано. Почему так?
.palette div {
min-width: 35px;
min-height: 35px;

}
.palette {
display: flex;
flex-direction: row;

}
.color-olive {
margin-top: auto;
margin-bottom: auto;
height: 150px;
margin-left: 31px;

}
.color-yellow {
margin-left: 10px;
height: 100px;
margin-top: auto;
margin-bottom: 5px;
margin-right: 20px;
}
.color-fuchsia {
height: 100px;
margin-top: 5px;
margin-left: 17px;
margin-right: 10px;
}
.color-aqua {
height: 150px;
width: 50px;
margin-top: auto;
margin-bottom: auto;
}

12

Нужны другие комбинации отступов, если вы хотите соблюсти условие задание.

1 лайк
13

Для автора вопроса, возможно, уже неактуально, но оставлю ответ для других учащихся, т.к. тоже не понял этот момент с margin-left: 5px у .color-fuchsia.

Этот отступ позволяет слегка скорректировать, пересчитать все автоматические горизонтальные отступы, которые заданы остальным элементам, что, в итоге, приводит к 100% соответствию Результата с Образцом.

Конкретно в цифрах:

  1. по CSS коду видно, что задано три горизонтальных auto отступа:
  • margin-left у .color-olive
  • margin-right у .color-yellow и у .color-aqua
  1. Если у .color-fuchsia margin-left: 0px, то каждый горизонтальный auto отступ будет равен 33.328px (можно увидеть в отладчике браузера).
  2. Если у .color-fuchsia margin-left: 5px, то каждый горизонтальный auto отступ будет равен 31.656px, т.е. эти добавленные 5px для .color-fuchsia равномерно будут вычтены из всех горизонтальных auto отступов. В нашем случае, из 3 горизонтальных отступов, что, в итоге, и приведёт для каждого размер в 31.656px (33.328px - 5px / 3 (цифры могут немного не сходиться, видимо, из-за каких-то особенностей браузера/ расчётов flex технологии)).
14

Жаль, что за столько времени никто не удосужился грамотно объяснить зачем нужен одному из малых блоков внешний-внутренний отсутп в 5px!
Если бы не условие в ограничение в 5px то крайние отступы слева в 31px и справа в 32px решают задачу.
Тут требуется либо толковое объяснение и раскладывание по полочкам алгоритма действий разработчика теста, либо признать ошибку (но это не точно) в тесте и переделать его. :slight_smile:

15

Мой вариант решения:

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

.palette {
  display: flex;
}

.palette div:first-child {
  margin-left: auto;
  margin-right: 10px;
}

.palette div:last-child {
  min-width: 50px;
  margin-left: 10px;
  margin-right: auto;
}

.palette div:nth-child(1),
.palette div:nth-child(4) {
  height: 150px;
  margin-top: auto;
  margin-bottom: auto;
}

.palette div:nth-child(2),
.palette div:nth-child(3) {
  height: 100px;
}

.palette div:nth-child(2) {
  margin-top: auto;
  margin-bottom: 5px;
  margin-right: auto;
}

.palette div:nth-child(3) {
  margin-top: 5px;
  margin-left: 5px;
}
16

Вот моё решение (100%)

Решение

.palette {
display: flex;
}

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

.palette .color-olive,
.palette .color-aqua {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}

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

.palette .color-olive {
margin-left: auto;
}

.palette .color-yellow {
margin-top: auto;
margin-right: auto;
}

.palette .color-fuchsia {
margin-bottom: auto;
}

.palette .color-aqua {
flex-basis: 50px;
margin-right: auto;
}

1 лайк