• Теория
  • Теория

Испытание: мастер коэффициентов

По многочисленным просьбам фанатов заданий на подбор коэффициентов мы создали это испытание, в котором вы снова сможете насладиться математикой и подсчётом дробей.

В заблокированном HTML-коде заданы базовые размеры блоков, которые вам изменять нельзя. Но отталкиваясь от этих размеров, вы можете понять, в каком блоке использовать коэффициенты растяжения, а в каком — коэффициенты сжатия. И, конечно, подобрать значения коэффициентов.

Подсказка: итоговые размеры блоков кратны 50, а коэффициенты — небольшие целые числа.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

.brick-layout {
  display: flex;
  box-sizing: content-box;
  padding: 5px;
  width: 300px;
}

.brick {
  min-width: 0;
  height: 100px;
}

.brick-1,
.brick-2,
.brick-3 {
  flex-basis: 25px;
}

.brick-1 {
  flex-grow: 1;
}

.brick-2 {
  flex-grow: 3;
}

.brick-3 {
  flex-grow: 5;
}

.brick-4 {
  flex-shrink: 1;
  flex-basis: 200px;
}

.brick-5 {
  flex-shrink: 3;
  flex-basis: 400px;
}

.brick-6 {
  flex-shrink: 3;
  flex-basis: 200px;
}
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Флексбокс. Погружение» тренажёра «Погружение в техники раскладок» можно после регистрации и оформления подписки.