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

0 2

Иногда мы используем ключевые слова, такие как 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>

1234 <div class=”s_1″>  nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor  illum praesentium ipsa minus</div>

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

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

CSS .s_2 { /* … */ width: min-content; /* … */ }

12345 .s_2 {  /* … */  width: min-content;  /* … */}

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

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

Здесь, с 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>

123456789 <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 границу, чтобы увидеть размер.

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

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

CSS figure { /* … */ width: min-content; }

1234 figure {  /* … */  width: min-content;}

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

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, чтобы получить внутренний минимальный размер бокса. Рассмотрим следующий код:

<div class=”grid”> <header class=”header”> <!– … –> </header> <div class=”content”> <!– … –> </div> <div class=”footer”> <!– … –> </div> </div>

1234567891011 <div class=”grid”>  <header class=”header”>    <!– … –>  </header>  <div class=”content”>    <!– … –>  </div>  <div class=”footer”>    <!– … –>  </div></div>

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

CSS .grid { display: grid; grid-template-rows: min-content auto min-content; height: 100vh; }

12345 .grid {  display: grid;  grid-template-rows: min-content auto min-content;  height: 100vh;}

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

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

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

CSS .grid { … /* grid-template-rows: min-content auto min-content; */ … } .header { … height: 40px; }

123456789 .grid {  …  /* grid-template-rows: min-content auto min-content; */  …}.header {  …  height: 40px;}

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

<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>

1234 <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>

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

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

Здесь первый элемент автоматически принимает значение ширины по умолчанию, таким образом, занимая столько места, сколько позволяет контейнер. Но, применив значение 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>

1234567 <div class=”container”>  <div>Lorem</div>  <div>    Lorem ipsum dolor sit amet  </div>  <div>Lorem ipsum dolor</div></div>

Затем добавим CSS:

CSS .container { display: grid; grid-template-columns: 1fr max-content max-content; /* … */ }

12345 .container {  display: grid;  grid-template-columns: 1fr max-content max-content;  /* … */}

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

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

Нежелательный эффект от max-content

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

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

<div id=”container”> <div class=”item1″>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div> </div>

123 <div id=”container”>  <div class=”item1″>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div></div>

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

CSS #container { /* … */ width: 200px; } .item1 { width: max-content; /* … */ }

123456789 #container {  /* … */  width: 200px;} .item1 {  width: max-content;  /* … */}

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

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

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

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

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

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

CSS .item1 { width: -moz-fit-content; width: fit-content; /* … */ }

12345 .item1 {  width: -moz-fit-content;  width: fit-content;  /* … */}

Обратите внимание, что мы должны использовать префикс -moz-, чтобы использовать это ключевое слово в Mozilla 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(percentage | length)

1 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>

1234567 <div class=”container”>       <div>Lorem ipsum dolor</div>  <div>    Lorem ipsum dolor, sit consectetur adipisicing elit.!  </div>  <div>Lorem</div></div>

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

CSS .container { display: grid; grid-template-columns: fit-content(200px) fit-content(250px) auto; /* … */ }

12345 .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 в CSS

Заключение

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

Автор: Ibadehin Mojeed

Источник: webformyself.com

Оставьте ответ