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

flex-shrink и min-width

Решение предыдущего задания: коэффициенты должны быть 1 и 1.

Давайте рассчитаем размеры элементов из предыдущего задания и убедимся в правильности описанного алгоритма.

Отрицательное пространство = 200px - 100px - 300px = -200px

Сумма произведений размеров на коэффициенты = (1 * 100px) + (1 * 300px) = 400px

Нормированный коэффициент 1 элемента = (1 * 100px) / 400px = 0.25
Нормированный коэффициент 2 элемента = (1 * 300px) / 400px = 0.75

Итоговый размер 1 элемента = 100px - (200px * 0.25) = 50px
Итоговый размер 2 элемента = 300px - (200px * 0.75) = 150px

Есть несколько тонкостей, касающихся сжатия флекс-элементов:

  • элементы сжимаются в пределах своих базовых размеров, внутренние отступы и рамки не сжимаются;
  • «ограничительные» свойства, такие как min-width, применяются к элементам после этапа перераспределения свободного места или отрицательного пространства.

И эти тонкости могут приводить к неожиданным эффектам, когда элементы выпадают из флекс-контейнера. Давайте поэкспериментируем.

Минимальный вид табов
  • index.html
HTML
HTML

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

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

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

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

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