Min width css что это

Свойство min-width

Свойство min-width устанавливает минимальную ширину элемента. Значением свойства служат любые единицы для размеров либо ключевое слово none , означающее отсутствие значения.

Обычно задается для элемента с плавающей шириной (ширина задана в процентах или не задана вообще, а элемент по ширине раздвигается своим содержимым). Если ширина элемента задана в процентах — при уменьшении окна браузера она будет уменьшаться, пока не достигнет значения min-width .

Синтаксис

Пример

В данном примере ширина составляет процент от ширины родителя. Уменьшите окно браузера по ширине, и контейнер тоже уменьшится, чтобы подстроиться под ширину окна браузера. Однако он будет уменьшаться только до величины, определенной в min-width , это 400px . Как только контейнер достигнет этой ширины — он перестанет уменьшаться:

Пример

В данном примере ширина контейнера ограничена с обоих сторон: он не сможет стать больше 900px и меньше 400px :

Смотрите также

• свойство max-width ,
  которое задает максимальную ширину элемента
• свойство max-height ,
  которое задает максимальную высоту элемента
• свойство max-height ,
  которое задает минимальную высоту элемента

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

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

Min-width отменяет использование свойств width и max-width.

Свойство может быть указано в единицах измерения длины CSS (px, pt, em и т. д.) или в процентах.

Отрицательные значения недопустимы.

Значение по умолчанию	none
Применяется	Ко всем элементам, кроме незаменяемых элементов, строк таблицы и групп строк.
Наследуется	Нет
Анимируемое	Да. Ширина анимируема.
Версия	CSS2
DOM синтаксис	object.style.minWidth = «200px»;

Синтаксис

min-width: none | length | initial | inherit;

Пример

html> html> head> title>Заголовок документа title> style> div < width:10px; min-width:70%; background-color: #1c87c9; color: #fff > style> head> body> div>Значение свойства min-width этого текста равно 70%. div> body> html>

Пример, где минимальная ширина элемента равна 10cm:

Пример

html> html> head> title>Заголовок документа title> style> span < background-color: #ccc; min-width: none; > .example < min-width: 10cm; display: inline-block; > style> head> body> h2>Пример свойства min-width h2> h3>Min-width: none: h3> span>Минимальная ширина указана как none. span> h3>min-width: 10cm: h3> span class="example">Минимальная ширина равна 10cm. span> body> html>

Значения

Значение	Описание
auto	Устанавливает минимальную ширину. Значение по умолчанию
length	Устанавливает минимальную ширину в единицах измерения длины (px, pt, cm и т. д.). Значение по умолчанию — 0.
%	Устанавливает минимальную ширину в процентах.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение свойства наследуется от родительского элемента.

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

1.0+

12.0+

1.0+

2.0+

4.0+

min-width¶

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

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

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

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

Демо¶

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

/* value */ min-width: 3.5em; /* 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.

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

 html> head> meta charset="utf-8" /> title>min-widthtitle> 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 class="container"> div class="col1">Колонка 1div> div class="col2">Колонка 2div> div> body> html> 

min-width

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

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

Табл. 1. Ширина элемента

Значения свойств					Ширина
min-width		width		max-width	width
min-width	>	width	>	max-width	min-width
min-width	>	width		max-width	min-width
min-width		width	width
min-width	>	width	min-width
min-width	>	max-width	min-width
min-width		max-width	max-width

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

Синтаксис

min-width: значение | проценты | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования min-width в браузере

Объектная модель

[window.]document.getElementById(» elementID «).style.minWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .