В ХТМЛ есть два основных типа элементов: строчные и блочные. Строчные элементы занимают ровно столько места, сколько нужно их содержимому, и выстраиваются друг за другом. Например, так ведут себя слова, ссылки и картинки в тексте. Блочные элементы занимают всю доступную ширину родителя и располагаются как этажи друг над другом. Например, так ведут себя абзацы, заголовки и списки.

Мы можем управлять шириной блочных элементов с помощью width и абсолютных или относительных значений: 300px, 50%, 25em и прочих. Но ни одно из этих значений не учитывает размеры содержимого: содержимое элемента подстраивается под его ширину.

Обычный заголовок с width: auto

Это очень длинный заголовок страницы

width: 300px

Это очень длинный заголовок страницы

width: 50%

Это очень длинный заголовок страницы

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

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

width: auto

Это очень длинный заголовок страницы

width: min‑content

Это очень длинный заголовок страницы

width: max‑content

Это очень длинный заголовок страницы

Грубо говоря, min‑content — это «займи как можно меньше места без переполнения», а max‑content — это «займи как можно больше места, считая, что страница бесконечна по ширине»

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

Ключевое слово fit-content — это симбиоз max-content и min-content: минимальная ширина равна min-content, максимальная — max-content, но если места не хватило, элемент сжимается и не переполняет родителя. Проще понять на примере:

width: auto

Это очень длинный заголовок страницы

width: fit‑content

Это очень длинный заголовок страницы

Порастягивайте окно и посмотрите, как меняется ширина заголовка

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

.header {
  display: grid; /* Включаем раскладку гридами */
  grid-template-columns: min-content max-content; /* Создаём направляющие для двух колонок. Первая занимает минимум по содержимому, вторая — максимум */
  justify-content: space-between; /* Отжимаем созданные колонки к краям шапки */
}

.menu {
  display: grid;
  grid-auto-flow: column; /* Автоматически раскладываем содержимое в колонки */
  grid-auto-columns: max-content; /* Автоматически создаём колонки по количеству пунктов меню с шириной по их содержимому */
  column-gap: 18px; /* Задаём межколонник в 18 пк */
}

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы