Контент при верстке всегда помещается в элементы-контейнеры, и затем они стилизуются. В некоторых случаях необходимо определить размеры контейнера для контента, не задавая принудительно ему значение. Существует свойство 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), чтобы достичь подобного эффекта.

 

Перевод статьи

comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)