Ключевое слово stretch: лучшая альтернатива width: 100% в CSS

Некоторые HTML элементы, например div или p, по умолчанию растягиваются на всю доступную ширину. Если задать им горизонтальный margin, это не приведёт к появлению горизонтальной полосы прокрутки. Это невероятно удобное поведение по умолчанию. Конечно, многие другие элементы по умолчанию не занимают всю ширину. Давайте рассмотрим несколько случаев, когда width: 100% может пригодиться, а затем обратимся к более новой альтернативе.

Размеры изображения по умолчанию определяются собственным размером встроенного изображения. Для предотвращения переполнения большим изображениям необходимо задавать width в 100%.

Хотите, чтобы элемент button или select был во всю ширину? Тогда необходимо применить width: 100%.

Эту проблему можно решить, используя calc для вычитания суммарного значения обоих margin'ов. Так, если левый и правый margin равны 24px, будет работать следующее:

button {
  width: calc(100% - 48px);
  margin-inline: 24px;
}

Если впоследствии вы решите обновить визуальный дизайн, изменив размер полей, то придётся изменить и значение в функции calc. Теперь есть более простой подход, позволяющий полностью избежать математики: ключевое слово stretch.

button {
  width: stretch;
  margin-inline: 24px;
}

Это свойство позволяет другим элементам перенимать автоматическое поведение div и p: растягиваться, чтобы заполнить доступную ширину, при этом позволяя без проблем использовать margin'ы.

Ключевое слово stretch также должно работать при определении height и flex-basis.

Поддержка браузерами

stretch — одно из немногих CSS свойств, всё ещё требующих префикса вендора. Следующий код должен работать во всех браузерах:

width: -webkit-fill-available;
width: -moz-available;
width: stretch;

Это свойство наконец-то стандартизировано и скоро будет доступно без префиксов.

На данный момент все браузеры поддерживают только width. Использование -moz-available или -webkit-fill-available для min-width или max-width не поддерживается Firefox и Safari. -moz-available не работает для height в Firefox. Chrome не поддерживает -webkit-fill-available в качестве значения для flex-basis.

Примечание по width: auto

Если вы когда-нибудь пытались понять, что означает width: auto, то понимание stretch поможет пройти половину пути. auto будет как fit-content для элементов типа элементов управления формой и как stretch для элементов типа div.

Комментарии