minmax()

Baseline Широко распространённый

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с октября 2017 года.

Функция CSS CSS function определяет диапазон размеров, больший или равный min и меньший или равный max. Она используется с CSS сетками.

Попробовать

Синтаксис

/* <inflexible-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* <fixed-breadth>, <track-breadth> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

Функция, принимающая два параметра: min и max.

Каждый параметр может быть <length>, <percentage>, значением <flex> или одним из ключевых значений max-content, min-content, или auto.

Если max < min, то max игнорируется, а minmax(min,max) рассматривается как min. В качестве максимального значения значение <flex> устанавливает гибкий фактор дорожки сетки; оно недействительно в качестве минимального значения.

Значения

<length>: Положительная длина.
<percentage>: Положительный процент, относительный к линейному размеру контейнера сетки в колонках сетки и размеру блока контейнера сетки в строках сетки. Если размер контейнера сетки зависит от размеров его дорожек, то <percentage> должен обрабатываться как auto. Агент пользователя может корректировать вклад собственных размеров дорожки в размер контейнера сетки и увеличивать конечный размер дорожки на минимальную величину, которая привела бы к соблюдению процента.
<flex>: Положительная величина с единицей fr, определяющей гибкий фактор дорожки. Каждая дорожка размера <flex> получает долю остающегося пространства пропорционально её гибкому фактору.
max-content: Представляет собой максимальный вклад max-content элементов сетки, занимающих дорожку сетки.
min-content: Представляет собой максимальный вклад min-content элементов сетки, занимающих дорожку сетки.
auto: Как min, он представляет собой максимальный минимальный размер (как указано в min-width/min-height) элементов сетки, занимающих дорожку сетки. Как max, он идентичен max-content. Однако, в отличие от max-content, он допускает расширение дорожки значениями свойств align-content и justify-content, такими как normal и stretch.

Формальный синтаксис

<minmax()> = 
  minmax( min , max )

Свойства CSS

Функция minmax() может использоваться в:

Примеры

CSS

#container {
  display: grid;
  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

HTML

<div id="container">
  <div>Item as wide as the content, but at most 300 pixels.</div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>

Результат

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

Спецификация
CSS Grid Layout Module Level 2 # funcdef-grid-template-columns-minmax

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`minmax`	57	16	52	44	10.1	57	52	43	10.3	6.0	57

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax