Содержание

min-width ⚡️ HTML и CSS с примерами кода

Свойство min-width устанавливает минимальную ширину элемента.

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

Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width, max-width и min-width.

Если значение ширины (width) меньше значения min-width, то ширина элемента принимается равной min-width.

Демо

Блоки
  • height
  • width
  • max-height
  • max-width
  • min-height
  • min-width
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • margin-trim
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • overflow
  • overflow-x
  • overflow-y
  • visibility

Синтаксис

/* <length> value */
min-width: 3. 5em;
/* <percentage> value */
min-width: 10%;
/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;
/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;

Значения

В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

auto Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем

0 для других способов разметки.

max-content Внутренняя предпочтительная ширина.

min-content Внутренняя минимальная ширина.

fill-available Ширина родительского блока минус горизонтальные margin, border, и padding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available.)

fit-content Определяет как min(max-content, max(min-content, fill-available)).

Значение по-умолчанию:

min-width: auto;

Применяется ко всем элементам, кроме строчных и таблиц

Спецификации

  • CSS Intrinsic & Extrinsic Sizing Module Level 3
  • CSS Level 2 (Revision 1)

Поддержка браузерами

Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>min-width</title>
    <style>
      .container {
        min-width: 420px; /* Минимальная ширина контейнера */
      }
      .col1 {
        background-color: #fc0; /* Цвет фона колонки */
        padding: 5px; /* Поля вокруг текста */
        float: left; /* Обтекание по правому краю */
        width: 150px; /* Ширина левой колонки */
      }
      .col2 {
        background-color: #c0c0c0; /* Цвет фона колонки */
        padding: 5px; /* Поля вокруг текста */
        width: 250px; /* Ширина правой колонки */
        float: left; /* Обтекание по правому краю */
      }
    </style>
  </head>
  <body>
    <div>
      <div>Колонка 1</div>
      <div>Колонка 2</div>
    </div>
  </body>
</html>

Подстройка html элементов под ширину контента

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

 

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

Понимание min-content, max-content и fit-content в CSS

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

В CSS мы определяем размер элемента, используя длину ( px , em ), процентное соотношение и значения ключевого слова. Хотя типы длины и процентного значения часто используются для макетов веб-страниц, они не всегда идеально подходят.

В некоторых случаях мы используем типы значений ключевых слов, в том числе fit-content , min-content и max-content .

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

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

Внутренний и внешний размер

Рассмотрим элемент div , содержащий содержимое с фиксированной шириной и высотой из 200px :

 <дел>
  nemo suscipitarchitectodeserunt vero, eveniet soluta deleniti alias dolor
  illum presentium ipsa минус

Здесь мы дали div границу, чтобы увидеть степень размера.

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

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

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

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

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

min-content

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

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

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →

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

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

 .s_2 {
  /* ... */
  ширина: мин-контент;
  /* ... */
}

И у нас должна получиться вот такая раскладка:

Здесь с min-content самое длинное слово в содержимом определяет размер блока; это внутренняя минимальная ширина коробки.

Практические примеры значения ключевого слова

min-content

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

Добавление подписей к изображениям

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

min-content для беспрепятственного достижения желаемого результата.

Давайте посмотрим на следующий код:

 <рисунок>
  <изображение
    src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"
    alt="образец"
  />
  

    Lorem ipsum dolor sit amet consectetur adipisicing elit

Это дает элементу фигура границу, чтобы увидеть размер размера.

Поскольку фигура является блочным элементом, ее ширина естественным образом занимает элемент-контейнер.

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

 цифра {
  /* ... */
  ширина: мин-контент;
}

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

Размерная сетка и элементы flexbox

min-content также является допустимым значением для свойств сетки и гибкого размера.

В CSS свойство flex-basis системы flexbox устанавливает размер блока содержимого. Это делает ключевое слово min-content идеальным значением для автоматического получения внутреннего минимального размера блока.

В данном случае мы используем flex-basis: min-content .

Аналогичным образом, в системе сетки мы можем назначить ключевое слово min-content свойствам grid-template-rows или grid-template-columns , чтобы получить внутренний минимальный размер блока.

Рассмотрим следующий код:

 <дел>
  <заголовок>
    
  
  <дел>