Контент при верстке всегда помещается в элементы-контейнеры, и затем они стилизуются. В некоторых случаях необходимо определить размеры контейнера для контента, не задавая принудительно ему значение. Существует свойство min-content – это одно из встроенных свойств CSS, которые верстальщики используют для создания content-first дизайна. В этой статье рассмотрим CSS свойство max-content, позволяющее задавать неразрывные области.
Использование свойства max-content для обертки групп изображений
К примеру, у нас есть набор изображений:
Тут все портит пустое пространство после последнего изображения.
Конечно можно использовать решение для адаптивных изображений, чтобы полностью заполнить эту область. Или вообще использовать другой подход – уменьшать размер области до тех пор, пока изображения не впишутся в эту область. Для этого нужно просуммировать ширину всех изображений и сделать ширину контейнера равную этой сумме. На самом деле, это довольно кропотливая работа и в случае изменения размера изображений придется все делать по новой. Есть путь проще – воспользоваться свойством max-content (обратите внимание, что свойство прописывается с вендорными свойствами):
Это куда более лучший результат. В качестве альтернативы можно использовать другие свойства – display: inline-block, display: table-cell или float, но все они имеют некоторые ограничения и зависят от того как, на странице располагается контент.
width:max-content влияет только на ширину элемента и размещает,помещенные в него элементы, в одну строку.
Использование max-content для контроля заголовка
Хороший способ охарактеризовать min-content и max-content – это то, что в min-content текст будет заполняться пока не "упрется" в какой-то объект (н-р, изображение), в то время как max-content никогда этого не сделает:
В результате текст под картинкой будет приоритетным, заполняя всегда одну строку, т.е. текст является неделимым. При этом надо быть осторожным, т.к. блокируется отзывчивость элементов.
Использование max-content в отзывчивом дизайне
Применив немного сообразительности, и мы сможем использовать max-content в отзывчивом дизайне:
figure{
margin: 0;
width: 33%;
max-width: max-content;
border: 4px solid black; padding: .4rem;
}
В этом примере мы делаем элемент <figure> равным 33% от ширины контейнера, но не больше длины текста.
Поддержка и особенности
max-content является частью CSS и это свойство было внедрено еще в Firefox4, но не стало популярным. Одной из причин является то, что это свойство требует прописывания префиксов:
max-width: -moz-max-content;
max-width: -webkit-max-content;
max-width: max-content;
Также еще одним весомым фактором является поддержка Internet Explorer. Это свойство не было включено даже в браузер Internet Explorer 11. Также не поддерживает это свойство Android, поэтому для браузеров IE и Android необходимо отдельно использовать другие способы (display: inline-block, display: table-cell или float), чтобы достичь подобного эффекта.
