W3docs
ru
Войти

Свойство CSS min-width

Используйте свойство CSS min-width, чтобы задать минимальную ширину области содержимого элемента. Значения и примеры.

Свойство min-width задаёт минимальную ширину элемента. Оно не позволяет значению свойства width сжиматься ниже указанного предела — как бы мало ни становилось доступное пространство.

На этой странице описано, что делает min-width, как оно взаимодействует со свойствами width и max-width, какие значения принимает (включая ключевые слова min-content/max-content/fit-content), а также типичная проблема с Flexbox, которую решает min-width.

Как min-width взаимодействует с width и max-width

Когда вы используете min-width вместе со свойствами width и max-width, min-width выступает нижней границей. Браузер вычисляет ширину, а затем ограничивает её диапазоном min-width … max-width:

  • Если width меньше min-width, элемент расширяется до min-width.
  • Если width больше max-width, элемент сужается до max-width.

Иными словами, min-width выигрывает у меньшего width, а max-width выигрывает у большего min-width — при конфликте min-width всегда имеет приоритет. Именно это делает элементы читаемыми при сохранении адаптивности: элемент может расширяться на широких экранах, но никогда не сжимается до нечитаемого размера.

Распространённый практический случай — предотвратить чрезмерное сужение столбца, карточки или кнопки внутри макета на основе Flexbox или сетки, где дочерние элементы иначе сжимались бы.

Информация

Отрицательные длины недопустимы — min-width принимает только 0 или положительную длину/процент.

Начальное значение0
Применяется кВсем элементам, кроме строчных незамещаемых элементов, строк таблицы и групп строк.
НаследуетсяНет.
АнимируетсяДа. Ширина поддаётся анимации.
ВерсияCSS2
DOM Syntaxobject.style.minWidth = "200px";

Синтаксис

min-width: <length> | <percentage> | min-content | max-content | fit-content | auto | initial | inherit;

Свойство принимает CSS-длину (px, pt, em, rem и т. д.), процент от ширины содержащего блока или одно из ключевых слов встроенного размера, описанных в таблице Значения ниже.

Примеры

Значение в процентах

Если min-width задан в процентах, он вычисляется относительно ширины содержащего блока. Здесь width: 10px переопределяется, потому что min-width: 70% больше, и элемент расширяется до 70% родительского:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      div {
        width: 10px;
        min-width: 70%;
        background-color: #1c87c9;
        color: #ffffff
      }
    </style>
  </head>
  <body>
    <div>The min-width of this text is defined as 70%.</div>
  </body>
</html>
Попробуйте сами »

Результат

Отображение в браузере блока div, ширина которого переопределена значением min-width равным 70 процентам

Фиксированное значение длины

В этом примере элементу типа inline-block задаётся min-width: 10cm. Он сравнивается с обычным span, у которого min-width: 0, что наглядно показывает, как минимальная граница заставляет второй блок оставаться шириной не менее 10 см, даже если текст короткий:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the document</title>
    <style>
      span {
        background-color: #ccc;
        min-width: 0;
      }
      .example {
        min-width: 10cm;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h2>Min-width property example</h2>
    <h3>Min-width: 0:</h3>
    <span>Minimum width is set to 0.</span>
    <h3>min-width: 10cm:</h3>
    <span class="example">Minimum width is set to 10cm.</span>
  </body>
</html>
Попробуйте сами »

Проблема Flexbox и min-width: 0

По умолчанию flex-элемент не может сжиматься меньше размера своего содержимого — его подразумеваемое значение min-width равно auto, а не 0. Именно поэтому длинные слова, блоки кода или элементы <pre> внутри flex-контейнера могут выходить за границы и растягивать весь макет вместо переноса или прокрутки.

Решение — явно задать min-width: 0 для flex-элемента, чтобы он мог сжиматься меньше своего содержимого:

.flex-item {
  min-width: 0; /* allow this item to shrink below its content width */
  overflow: hidden; /* or use overflow-x: auto for scrollable content */
}

Подробнее об управлении поведением сжатого содержимого читайте в overflow и flex.

Значения

ЗначениеОписаниеПример
lengthЗадаёт минимальную ширину в px, pt, cm, em и т. д. Значение по умолчанию — 0.Пример »
%Задаёт минимальную ширину в процентах от ширины содержащего элемента.Пример »
min-contentНаименьшая ширина, при которой содержимое не переполняется (например, длина самого длинного слова).
max-contentШирина, которую занимало бы содержимое без переноса строк.
fit-contentИспользует доступное пространство, но не больше max-content.
autoЗначение по умолчанию — для большинства элементов равно 0, для flex-элементов — размеру содержимого.
initialУстанавливает свойство в значение по умолчанию (0).Пример »
inheritНаследует значение свойства от родительского элемента.

Связанные свойства

  • width — задаёт предпочтительную ширину, которую ограничивает min-width.
  • max-width — задаёт верхнюю границу диапазона ширины.
  • min-height — вертикальный аналог min-width.
  • box-sizing — определяет, учитываются ли padding и border при вычислении ширины.

Практика

Практика
Какова функция свойства 'min-width' в CSS?
Какова функция свойства 'min-width' в CSS?
Was this page helpful?