min-width
Свойство CSS min-width устанавливает минимальную ширину элемента. Оно предотвращает используемое значение свойства width от становления меньше, чем значение, указанное для min-width.
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулреквест.
Ширина элемента принимает значение min-width когда min-width больше чем max-width или width.
Синтаксис
/* <length> значение */
min-width: 3.5em;
/* <percentage> значение */
min-width: 10%;
/* Значения-ключевые слова */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;
/* Глобальные значения */
min-width: inherit;
min-width: initial;
min-width: unset;
Значения
<length>- Минимальная ширина выражается как
<length>. Отрицательные значения делают свойство недействительным. <percentage>- Минимальная ширина выражается как
<percentage>от ширины родительского блока. Отрицательные значения делают свойство недействительным.
Значения-ключевые слова
auto- Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content- Внутренняя предпочтительная ширина.
min-content- Внутренняя минимальная ширина.
fill-available- Ширина родительского блока минус горизонтальные
margin,border, иpadding. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова.,available.) fit-content- Определяет как
min(max-content, max(min-content, fill-available)).
Формальный синтаксис
auto | (en-US) <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)где
<length-percentage> = <length> | (en-US) <percentage>
Примеры
table { min-width: 75%; }
form { min-width: 0; }
Спецификации
| Спецификация | Статус | Комментарий |
|---|---|---|
| CSS Box Sizing Module Level 3 Определение 'min-width' в этой спецификации. |
Рабочий черновик | Добавляет ключевые слова max-content, min-content, fit-content, и fill-available. (CSS3 Box и CSS3 Writing Modes черновики, используемые для определения этих ключевых слов, были заменены этой спецификацией) |
| CSS Flexible Box Layout Module Определение 'min-width' в этой спецификации. |
Кандидат в рекомендации | Добавляет ключевое слово auto и использует как значение по умолчанию. |
| CSS Transitions Определение 'min-width' в этой спецификации. |
Рабочий черновик | Определяет min-width как анимируемое. |
| CSS Level 2 (Revision 1) Определение 'min-width' в этой спецификации. |
Рекомендация | Первоначальное определение. |
| Начальное значение | auto |
|---|---|
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или аблосютная длина |
| Animation type | длина, проценты или calc(); |
Поддержка браузерами
BCD tables only load in the browser