От автора: понимание размеров в CSS необходимо разработчикам, которым нужна гибкость для правильного представления содержимого веб-страницы. В CSS мы определяем размер элемента, используя значения длины (px, em), процентов и ключевых слов. Хотя типы значений длины и процентного значения часто используются для макетов веб-страниц, они не всегда идеально подходят.
Иногда мы используем ключевые слова, такие как fit-content, min-content и max-content. В этом руководстве мы расскажем о значении этих ключевых слов, их различии и как они могут применяться в реальном проекте. Прежде чем мы продолжим, убедитесь, что у вас есть базовые представления о CSS.
Внутренние и внешние размеры
Рассмотрим div элемент, содержащий контент с фиксированной шириной и высотой 200 пикселей:
<div class="s_1"> nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor illum praesentium ipsa minus </div>
Установим рамку для div, чтобы увидеть размер.
Когда мы изменяем естественный размер элемента, применяя к нему определенное значение, как показано на изображении выше, мы называем этот размер внешним.
С другой стороны, когда размер содержимого определяет размер элемента, мы называем его внутренним или естественным размером.
Ограничивая размер блока определенным размером, мы сталкиваемся с переполнением контента, что является обратной стороной внешнего изменения размера.
Однако мы можем исправить нежелательное поведение, чтобы улучшить макет, определив внутренний размер элемента с помощью ключевых слов.
Значение ключевого слова min-content
Согласно спецификации W3C, min-content — это наименьший размер, который может принимать блок, не переполняя его содержимое.
Для горизонтального содержимого min-content использует длину самой широкой части содержимого в блоке элемента и автоматически устанавливает значение его длины как ширину блока. Контент в этом случае включает текст и ресурсы, такие как изображения и видео.
Если мы вернемся к приведенному выше примеру, мы можем применить min-content к элементу нашей коробки следующим образом:
.s_2 { /* ... */ width: min-content; /* ... */
}У нас должен получиться такой макет:
Здесь, с min-content, самое длинное слово в содержимом определяет размер поля; это внутренняя минимальная ширина коробки.
Практические примеры значения ключевого слова min-content
Для реализации ключевого слова min-content в реальном проекте, рассмотрим следующие варианты использования.
Добавление подписей к изображениям
В случае, когда мы хотим использовать подпись под изображением, которая соответствует его ширине, мы можем использовать min-content для беспрепятственного достижения желаемого результата. Давайте рассмотрим следующий код:
<figure> <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png" alt="sample" /> <figcaption> Lorem ipsum dolor sit amet consectetur adipisicing elit </figcaption> </figure>
Это дает элементу figure границу, чтобы увидеть размер.
Поскольку figure является блочным элементом, его ширину, естественно, занимает контейнерный элемент. При назначении ширины min-content элементу figure его размер определяется самой широкой частью содержимого. В этом случае самой широкой частью является изображение:
figure { /* ... */ width: min-content;
}Это дает следующий результат с изображением, определяющим ширину:
Изменение размеров элементов сетки и flexbox
Min-content также является допустимым значением для свойств размеров сетки и flexbox. Свойство flex-basic устанавливает размер поля содержимого для flexbox. Это делает min-content идеальным значением для автоматического получения внутреннего минимального размера окна. В этом случае мы используем flex-basis: min-content.
Точно так же в системе сетки мы можем назначить ключевое слово min-content свойствам grid-template-rows или grid-template-columns, чтобы получить внутренний минимальный размер бокса. Рассмотрим следующий код:
<div class="grid"> <header class="header"> <!-- ... --> </header> <div class="content"> <!-- ... --> </div> <div class="footer"> <!-- ... --> </div> </div>
Обратите внимание, что мы удалили содержимое элемента для краткости. Давайте преобразуем структуру в макет сетки и применим ключевое слово min-content:
.grid { display: grid; grid-template-rows: min-content auto min-content; height: 100vh;
}Таким образом, мы получаем внутреннее минимальное значение высоты содержимого, не вызывая переполнения.
Если мы не применим min-content, то получим другое поведение. Чтобы визуализировать это поведение, мы можем временно удалить строки шаблона сетки и применить фиксированную высоту к заголовку:
.grid { ... /* grid-template-rows: min-content auto min-content; */ ...
}
.header { ... height: 40px;
}При такой реализации мы больше не получаем естественного размера содержимого. В таком случае блоки элементов могут быть слишком большими для их содержимого, что приведет к переполнению.
Ключевое слово max-content
Согласно спецификации W3C, max-content представляет собой идеальный размер блока по заданной оси при бесконечно доступном пространстве.
Другими словами, max-content представляет размер, в который блок должен поместить все содержимое без упаковки, иначе блок будет переполнен. Давайте применим max-content к размеру элемента:
<div id="container"> <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> <div class="item2">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> </div>
После рендеринга мы получим такой результат:
Здесь первый элемент автоматически принимает значение ширины по умолчанию, таким образом, занимая столько места, сколько позволяет контейнер. Но, применив значение max-content к тому же блоку, мы получим точный размер содержимого блока.
Значение ключевого слова max-content идеально подходит в ситуациях, когда нам нужна максимальная ширина содержимого, чтобы определить размер поля.
Практический пример использования ключевого слова max-content
Рассмотрим структуру макета сетки, в которой мы применяем max-content к столбцам сетки. HTML включает в себя следующее:
<div class="container"> <div>Lorem</div> <div> Lorem ipsum dolor sit amet </div> <div>Lorem ipsum dolor</div> </div>
Затем добавим CSS:
.container { display: grid; grid-template-columns: 1fr max-content max-content; /* ... */
}Это отобразит столбец со значением max-content, принимающим размер содержимого, в то время как столбец с fr занимает оставшееся доступное пространство.
Нежелательный эффект от max-content
max-content, как мы узнали, довольно хорошо работает для бесконечно доступного пространства, где элемент коробки может вмещать все свое содержимое без упаковки и переполнения родительского контейнера.
Однако в случае, когда родительский элемент или элемент наследник не может вместить размер элемента коробки, то мы получим переполнение:
<div id="container"> <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> </div>
Установим ширину:
#container { /* ... */ width: 200px;
} .item1 { width: max-content; /* ... */
}В этом коде внутренняя максимальная ширина box больше, чем у контейнера, что вызывает переполнение.
В такой ситуации мы должны настроить содержимое поля, чтобы оно соответствовало доступному пространству контейнера. Вот тут-то и появляется ключевое слово fit-content.
Ключевое слова fit-content
В зависимости от размера элемента контейнера, при применении fit-content к элементу коробки внутри контейнера, коробка использует либо максимальный размер содержимого, либо минимальный размер содержимого, либо доступный контейнер в качестве идеального размера.
При наличии бесконечно доступного пространства max-content определяет идеальный размер элемента коробки. Однако, когда область просмотра более узкая, доступное пространство становится размером с блок, чтобы предотвратить переполнение до тех пор, пока блок использует min-content. Если мы вернемся к нашему примеру, применив fit-content к элементу коробки, мы получим следующее:
.item1 { width: -moz-fit-content; width: fit-content; /* ... */
}Обратите внимание, что мы должны использовать префикс -moz-, чтобы использовать это ключевое слово в Mozilla Firefox.
Как видно на GIF-изображении ниже, поле использует доступное пространство, но никогда не расширяется за пределы max-content, а когда область просмотра сужается, поле никогда не выходит за пределы min-content.
Функция fit-content()
В спецификации W3C отмечается, что функция fit-content() позволяет разработчикам определять максимально допустимую ширину для размера элемента. Эта функция CSS часто определяет размер столбцов и строк сетки, используя grid-template-columns и grid-template-rows соответственно. Функция fit-content() принимает в качестве аргумента процент или единицу длины:
fit-content(percentage | length)
Подобно ключевому слову fit-content, при присвоении значения функции для определения размера в макете сетки она использует указанный аргумент в качестве максимально допустимого размера поля, при этом гарантируя, что поле никогда не выходит за пределы max-content. Давайте рассмотрим структуру макета сетки и применим fit-content() к столбцу сетки:
<div class="container"> <div>Lorem ipsum dolor</div> <div> Lorem ipsum dolor, sit consectetur adipisicing elit.! </div> <div>Lorem</div> </div>
Добавим fit-content() к нашему CSS:
.container { display: grid; grid-template-columns: fit-content(200px) fit-content(250px) auto; /* ... */
}В первом столбце макета сетки мы передали 200 пикселей в качестве аргумента, следовательно, столбец имеет максимальную допустимую ширину 200 пикселей, а второй столбец имеет максимальную допустимую ширину 250 пикселей. Третий столбец занимает оставшееся пространство контейнера, поскольку ему присвоено значение auto.
Коробки, размеры которых определены функцией fit-content(), никогда не выходят за пределы указанной ширины, а также никогда не выходят за пределы max-content. Но, когда область просмотра сужается, поле может уменьшиться, чтобы соответствовать содержимому.
Заключение
Благодаря внутренним значениям ключевых слов у нас есть гибкость для представления содержимого страницы наиболее подходящими способами. В этом руководстве мы рассмотрели, как использовать значения ключевых слов min-content, max-content и fit-content с практическими примерами, чтобы вы могли использовать их в своих проектах.
Автор: Ibadehin Mojeed
Источник: blog.logrocket.com
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен