В ХТМЛ есть два основных типа элементов: строчные и блочные. Строчные элементы занимают ровно столько места, сколько нужно их содержимому, и выстраиваются друг за другом. Например, так ведут себя слова, ссылки и картинки в тексте. Блочные элементы занимают всю доступную ширину родителя и располагаются как этажи друг над другом. Например, так ведут себя абзацы, заголовки и списки.
Мы можем управлять шириной блочных элементов с помощью width и абсолютных или относительных значений: 300px, 50%, 25em и прочих. Но ни одно из этих значений не учитывает размеры содержимого: содержимое элемента подстраивается под его ширину.
Это очень длинный заголовок страницы
Это очень длинный заголовок страницы
Это очень длинный заголовок страницы
В элементах, содержащих не только текст, но и изображения или видео, min‑content, max‑content и fit‑content будут опираться и на их размеры
Чтобы задать блочному элементу ширину по содержимому, придумали ключевые слова min-content, max-content и fit-content. При этом min-content даст ширину по самому длинному слову, а max-content — по максимальной ширине без переносов:
Это очень длинный заголовок страницы
Это очень длинный заголовок страницы
Это очень длинный заголовок страницы
В элементах, содержащих не только текст, но и изображения или видео, min‑content, max‑content и fit‑content будут опираться и на их размеры
Ключевое слово fit-content — это симбиоз max-content и min-content: минимальная ширина равна min-content, максимальная — max-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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.