03.12.2021

min-content, max-content и fit-content в CSS

min-content, max-content и fit-content в CSS

От создателя: понимание размеров в CSS нужно разработчикам, которым нужна гибкость для правильного представления содержимого интернет-страницы. В CSS мы определяем размер элемента, используя значения длины (px, em), процентов и главных слов. Хотя типы значений длины и процентного значения нередко используются для макетов веб-страниц, они не всегда совершенно подходят.

Время от времени мы используем ключевые слова, такие как fit-content, min-content и max-content. В этом руководстве мы поведаем о значении этих ключевых слов, их различии и как они имеют возможность применяться в реальном проекте. Прежде чем мы продолжим, удостоверьтесь, что у вас есть базовые представления о CSS.

Внутренние и наружные размеры

Рассмотрим div элемент, содержащий контент с фиксированной шириной и высотой 200 пикселей:

Установим рамку для div, чтоб увидеть размер.

min-content, max-content и fit-content в CSS

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

С другой стороны, когда размер содержимого определяет размер элемента, мы называем его внутренним либо естественным размером.

Ограничивая размер блока определенным размером, мы сталкиваемся с переполнением контента, что является оборотной стороной внешнего изменения размера.

Но мы можем исправить нежелательное поведение, чтоб улучшить макет, определив внутренний размер элемента с помощью главных слов.

Значение ключевого слова min-content

Согласно спецификации W3C, min-content — это меньший размер, который может принимать блок, не переполняя его содержимое.

Для горизонтального содержимого min-content употребляет длину самой широкой части содержимого в блоке элемента и автоматом устанавливает значение его длины как ширину блока. Контент в этом случае включает текст и ресурсы, такие как изображения и видео.

Если мы вернемся к приведенному выше примеру, мы можем применить min-content к элементу нашей коробки последующим образом:

CSS

У нас должен получиться таковой макет:

min-content, max-content и fit-content в CSS

Тут, с min-content, самое длинное слово в содержимом определяет размер поля; это внутренняя малая ширина коробки.

Практические примеры значения главного слова min-content

Для реализации главного слова min-content в реальном проекте, разглядим следующие варианты использования.

Добавление подписей к изображениям

В случае, когда мы желаем использовать подпись под изображением, которая соответствует его ширине, мы можем использовать min-content для беспрепятственного заслуги желаемого результата. Давайте рассмотрим следующий код:

Это дает элементу figure границу, чтоб увидеть размер.

min-content, max-content и fit-content в CSS

Так как figure является блочным элементом, его ширину, естественно, занимает контейнерный элемент. При предназначении ширины min-content элементу figure его размер определяется самой широкой частью содержимого. В этом случае самой широкой частью является изображение:

CSS

Это дает последующий результат с изображением, определяющим ширину:

min-content, max-content и fit-content в CSS

Изменение размеров частей сетки и flexbox

Min-content также является допустимым значением для параметров размеров сетки и flexbox. Свойство flex-basic устанавливает размер поля содержимого для flexbox. Это делает min-content безупречным значением для автоматического получения внутреннего малого размера окна. В этом случае мы используем flex-basis: min-content.

Точно так же в системе сетки мы можем назначить ключевое слово min-content свойствам grid-template-rows либо grid-template-columns, чтобы получить внутренний минимальный размер бокса. Разглядим следующий код:

Обратите внимание, что мы удалили содержимое элемента для краткости. Давайте преобразуем структуру в макет сетки и применим ключевое слово min-content:

CSS

Таким образом, мы получаем внутреннее малое значение высоты содержимого, не вызывая переполнения.

min-content, max-content и fit-content в CSS

Если мы не применим min-content, то получим другое поведение. Чтоб визуализировать это поведение, мы можем временно удалить строчки шаблона сетки и применить фиксированную высоту к заголовку:

CSS

При таковой реализации мы больше не получаем естественного размера содержимого. В таком случае блоки частей могут быть слишком большими для их содержимого, что приведет к переполнению.

Ключевое слово max-content

Согласно спецификации W3C, max-content представляет собой безупречный размер блока по заданной оси при нескончаемо доступном пространстве.

Другими словами, max-content представляет размер, в который блок должен поместить все содержимое без упаковки, по другому блок будет переполнен. Давайте применим max-content к размеру элемента:

После рендеринга мы получим таковой результат:

min-content, max-content и fit-content в CSS

Тут первый элемент автоматически принимает значение ширины по умолчанию, таким образом, занимая столько места, сколько позволяет контейнер. Но, применив значение max-content к тому же блоку, мы получим четкий размер содержимого блока.

Значение главного слова max-content идеально подходит в ситуациях, когда нам нужна наибольшая ширина содержимого, чтобы определить размер поля.

Практический пример использования главного слова max-content

Рассмотрим структуру макета сетки, в которой мы применяем max-content к столбцам сетки. HTML включает в себя последующее:

Потом добавим CSS:

CSS

Это покажет столбец со значением max-content, принимающим размер содержимого, в то время как столбец с fr занимает оставшееся доступное место.

min-content, max-content и fit-content в CSS

Ненужный эффект от max-content

max-content, как мы узнали, достаточно хорошо работает для бесконечно доступного места, где элемент коробки может вмещать все свое содержимое без упаковки и переполнения родительского контейнера.

Но в случае, когда родительский элемент либо элемент наследник не может вместить размер элемента коробки, то мы получим переполнение:

Установим ширину:

CSS

В этом коде внутренняя наибольшая ширина box больше, чем у контейнера, что вызывает переполнение.

min-content, max-content и fit-content в CSS

В таковой ситуации мы должны настроить содержимое поля, чтоб оно соответствовало доступному пространству контейнера. Вот тут-то и возникает ключевое слово fit-content.

Ключевое слова fit-content

В зависимости от размера элемента контейнера, при применении fit-content к элементу коробки снутри контейнера, коробка использует либо максимальный размер содержимого, или минимальный размер содержимого, либо доступный контейнер в качестве безупречного размера.

При наличии нескончаемо доступного пространства max-content определяет идеальный размер элемента коробки. Но, когда область просмотра более узкая, доступное место становится размером с блок, чтобы предупредить переполнение до тех пор, пока блок употребляет min-content. Если мы вернемся к нашему примеру, применив fit-content к элементу коробки, мы получим последующее:

CSS

Обратите внимание, что мы должны использовать префикс -moz-, чтоб использовать это ключевое слово в Мозилла Firefox.

Как видно на GIF-изображении ниже, поле употребляет доступное пространство, но никогда не расширяется за пределы max-content, а когда область просмотра сужается, поле никогда не выходит за пределы min-content.

min-content, max-content и fit-content в CSS

Функция fit-content()

В спецификации W3C отмечается, что функция fit-content() позволяет разработчикам определять очень допустимую ширину для размера элемента. Эта функция CSS нередко определяет размер столбцов и строк сетки, используя grid-template-columns и grid-template-rows соответственно. Функция fit-content() воспринимает в качестве аргумента процент или единицу длины:

CSS

Подобно главному слову fit-content, при присвоении значения функции для определения размера в макете сетки она употребляет указанный аргумент в качестве максимально допустимого размера поля, при этом гарантируя, что поле никогда не выходит за пределы max-content. Давайте разглядим структуру макета сетки и применим fit-content() к столбцу сетки:

Добавим fit-content() к нашему CSS:

CSS

В первом столбце макета сетки мы передали 200 пикселей в качестве аргумента, как следует, столбец имеет максимальную допустимую ширину 200 пикселей, а 2-ой столбец имеет максимальную допустимую ширину 250 пикселей. 3-ий столбец занимает оставшееся пространство контейнера, так как ему присвоено значение auto.

Коробки, размеры которых определены функцией fit-content(), никогда не выходят за пределы обозначенной ширины, а также никогда не выходят за пределы max-content. Но, когда область просмотра сужается, поле может уменьшиться, чтоб соответствовать содержимому.

min-content, max-content и fit-content в CSS

Заключение

Благодаря внутренним значениям главных слов у нас есть гибкость для представления содержимого странички наиболее подходящими способами. В этом руководстве мы разглядели, как использовать значения ключевых слов min-content, max-content и fit-content с практическими примерами, чтоб вы могли использовать их в собственных проектах.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *