От автора: понимание размеров в CSS необходимо разработчикам, которым нужна гибкость для правильного представления содержимого веб-страницы. В CSS мы определяем размер элемента, используя значения длины (px, em), процентов и ключевых слов. Хотя типы значений длины и процентного значения часто используются для макетов веб-страниц, они не всегда идеально подходят.
Иногда мы используем ключевые слова, такие как fit-content, min-content и max-content. В этом руководстве мы расскажем о значении этих ключевых слов, их различии и как они могут применяться в реальном проекте. Прежде чем мы продолжим, убедитесь, что у вас есть базовые представления о CSS.
Внутренние и внешние размеры
Рассмотрим div элемент, содержащий контент с фиксированной шириной и высотой 200 пикселей:
|
1 2 3 4 |
<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 к элементу нашей коробки следующим образом:
|
1 2 3 4 5 |
.s_2 { /* ... */ width: min-content; /* ... */ } |
У нас должен получиться такой макет:
Здесь, с min-content, самое длинное слово в содержимом определяет размер поля; это внутренняя минимальная ширина коробки.
Практические примеры значения ключевого слова min-content
Для реализации ключевого слова min-content в реальном проекте, рассмотрим следующие варианты использования.
Добавление подписей к изображениям
В случае, когда мы хотим использовать подпись под изображением, которая соответствует его ширине, мы можем использовать min-content для беспрепятственного достижения желаемого результата. Давайте рассмотрим следующий код:
|
1 2 3 4 5 6 7 8 9 |
<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 его размер определяется самой широкой частью содержимого. В этом случае самой широкой частью является изображение:
|
1 2 3 4 |
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, чтобы получить внутренний минимальный размер бокса. Рассмотрим следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="grid"> <header class="header"> <!-- ... --> </header> <div class="content"> <!-- ... --> </div> <div class="footer"> <!-- ... --> </div> </div> |
Обратите внимание, что мы удалили содержимое элемента для краткости. Давайте преобразуем структуру в макет сетки и применим ключевое слово min-content:
|
1 2 3 4 5 |
.grid { display: grid; grid-template-rows: min-content auto min-content; height: 100vh; } |
Таким образом, мы получаем внутреннее минимальное значение высоты содержимого, не вызывая переполнения.
Если мы не применим min-content, то получим другое поведение. Чтобы визуализировать это поведение, мы можем временно удалить строки шаблона сетки и применить фиксированную высоту к заголовку:
|
1 2 3 4 5 6 7 8 9 |
.grid { ... /* grid-template-rows: min-content auto min-content; */ ... } .header { ... height: 40px; } |
При такой реализации мы больше не получаем естественного размера содержимого. В таком случае блоки элементов могут быть слишком большими для их содержимого, что приведет к переполнению.
Ключевое слово max-content
Согласно спецификации W3C, max-content представляет собой идеальный размер блока по заданной оси при бесконечно доступном пространстве.
Другими словами, max-content представляет размер, в который блок должен поместить все содержимое без упаковки, иначе блок будет переполнен. Давайте применим max-content к размеру элемента:
|
1 2 3 4 |
<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 включает в себя следующее:
|
1 2 3 4 5 6 7 |
<div class="container"> <div>Lorem</div> <div> Lorem ipsum dolor sit amet </div> <div>Lorem ipsum dolor</div> </div> |
Затем добавим CSS:
|
1 2 3 4 5 |
.container { display: grid; grid-template-columns: 1fr max-content max-content; /* ... */ } |
Это отобразит столбец со значением max-content, принимающим размер содержимого, в то время как столбец с fr занимает оставшееся доступное пространство.
Нежелательный эффект от max-content
max-content, как мы узнали, довольно хорошо работает для бесконечно доступного пространства, где элемент коробки может вмещать все свое содержимое без упаковки и переполнения родительского контейнера.
Однако в случае, когда родительский элемент или элемент наследник не может вместить размер элемента коробки, то мы получим переполнение:
|
1 2 3 |
<div id="container"> <div class="item1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> </div> |
Установим ширину:
|
1 2 3 4 5 6 7 8 9 |
#container { /* ... */ width: 200px; } .item1 { width: max-content; /* ... */ } |
В этом коде внутренняя максимальная ширина box больше, чем у контейнера, что вызывает переполнение.
В такой ситуации мы должны настроить содержимое поля, чтобы оно соответствовало доступному пространству контейнера. Вот тут-то и появляется ключевое слово fit-content.
Ключевое слова fit-content
В зависимости от размера элемента контейнера, при применении fit-content к элементу коробки внутри контейнера, коробка использует либо максимальный размер содержимого, либо минимальный размер содержимого, либо доступный контейнер в качестве идеального размера.
При наличии бесконечно доступного пространства max-content определяет идеальный размер элемента коробки. Однако, когда область просмотра более узкая, доступное пространство становится размером с блок, чтобы предотвратить переполнение до тех пор, пока блок использует min-content. Если мы вернемся к нашему примеру, применив fit-content к элементу коробки, мы получим следующее:
|
1 2 3 4 5 |
.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() принимает в качестве аргумента процент или единицу длины:
|
1 |
fit-content(percentage | length) |
Подобно ключевому слову fit-content, при присвоении значения функции для определения размера в макете сетки она использует указанный аргумент в качестве максимально допустимого размера поля, при этом гарантируя, что поле никогда не выходит за пределы max-content. Давайте рассмотрим структуру макета сетки и применим fit-content() к столбцу сетки:
|
1 2 3 4 5 6 7 |
<div class="container"> <div>Lorem ipsum dolor</div> <div> Lorem ipsum dolor, sit consectetur adipisicing elit.! </div> <div>Lorem</div> </div> |
Добавим fit-content() к нашему CSS:
|
1 2 3 4 5 |
.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, Яндекс.Дзен
