Сколько аргументов принимает функция min max
Перейти к содержимому

Сколько аргументов принимает функция min max

How the minmax() Function Works

One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value.

The minmax() Function

The minmax() function accepts two parameters, a minimum value and a maximum value.

If the maximum value defined is actually less than the minimum, it is ignored, and the function is treated as purely presenting a minimum value.

The minmax() function accepts 6 types of value:

  • Length
  • Percentage
  • Flexible Length
  • max-content
  • min-content
  • auto

Let’s consider examples of each.

Length

Perhaps the most simple value we can use with the minmax() function is a basic length. Take, for example, this simple grid, which has three columns and a single row.

3 Column by 1 Row Grid

Using the minmax() function, we can specify that the yellow grid cell remain between 100px and 200px. As the viewport is resized, the absolute value will change, but always within these two limits.

The second and third columns shrink and expand to fill the remaining available space equally, but the first column always remains between 100px and 200px wide.

Percentage

Besides the basic length units, we can also use percentage units with the minmax() function. Say, for example, that we want the yellow grid cell to take up a maximum of 50% of the grid, but not get any smaller than 200px.

No matter how small we shrink the viewport, the yellow cell never gets smaller than 200px. But, when it has the room to, is grows to a maximum of half the grid width.

Flexible Length

The Flexible Length is a new unit which, like the minmax() function, was also introduced with the CSS Grid Layout Specification. This length, which uses the fr unit, represents a fraction of the free space in the grid container. For example, let’s say we have a 100px-wide grid, with 2 columns. One column has a fixed width of 20px and the other column has a width of 1fr. The second column will effectively have a width of 80px, as it takes up the remaining available space within the grid.

Currently, the fr unit can only be used as the maximum value in the minmax() function (although it is noted in the spec that, in the future, it may be applicable to the minimum value as well). Going back to our example, we can specify that we want the yellow grid cell to be a minimum of 200px. If the viewport is resized larger than that, we want the cell to be 1fr, the same size as the other two columns.

Since all columns are 1fr at larger viewport sizes, they share an equal amount of space within the grid.

max-content

The max-content keyword is a special value that represents the cell’s "ideal size". This is the smallest possible size the cell can be, while still fitting around it’s contents unobtrusively. For example, if the contents of the cell is a sentence, the ideal width for the cell will be to take up the entire length of the sentence, regardless of the length and no line breaks.

Taking our previous example, let’s specify that the yellow grid cell be both a minimum and maximum of max-content .

As we can see, the size of the column expands to fit the entire length of the string. Since both the minimum and maximum values are set to max-content , the width of the column remains the same.

min-content

The min-content keyword, like max-content , is a special value. It represents the smallest possible size the cell can be that does not lead to an overflow, unless that overflow is unavoidable.

To illustrate the difference between min-content and max-content , we can use the same content as in the previous example, but set both values of the minmax() function to min-content .

We can see that the content within the cell is shifted in order to take up the least amount of horizontal space possible, without causing any overflow.

Finally, we have auto . This has different meanings depending on if it is used as the maximum or minimum value in the minmax() function.

If used as a maximum, the auto value is equivalent to the max-content value. If used as a minimum, the auto value represents the largest minimum size the cell can be. This "largest minimum size" is different from the min-content value, and specified by min-width / min-height .

To illustrate this, here’s what happens when the yellow grid cell in our example is set to an auto minimum and maximum.

Using the minmax() Function: Responsive Design without Media Queries

As we have seen, there are several cases where using the minmax() function is suitable, and we can use it in several ways. But perhaps the most popular and useful case for the minmax() function it’s ability to enable us create responsive designs without the use of any media queries.

Let’s take this example grid:

Each column in the grid has a minimum width of 200px. As the viewport is resized, the number of columns changes to fit their ideal width. With CSS Grid and the minmax() function, this can be created in as little as 2 lines of CSS —

Besides the minmax() function, there are two other key parts to this:

  • repeat() : This function allows us to specify the same value for multiple columns in the grid. It accepts two values: the number of times to repeat, and the value to be repeated.
  • auto-fit : This keyword can be used with the repeat() function instead a number of times to repeat. This will flexibly change the number of columns that are used based on the width each column can be.

One, in my opinion quite major, limitation of this technique, however, is that it only works when each column is of equal width. We have to use the repeat() function with the auto-fit keyword, as this is what allows the number of columns to be flexible. Nonetheless, this can still an extremely useful technique in the right circumstances.

Как работает функция minmax()

SelenITSelenIT

Одна из невероятно полезных новинок спецификации CSS Grid Layout — функция minmax() . Эта функция открывает нам возможность писать более мощный и лаконичный CSS, позволяя задавать в качестве значения для грид-полосы функцию, включающую и минимальное, и максимальное значения.

Функция minmax()

Функция minmax() принимает два параметра, минимальное значение и максимальное.

Если указанное максимальное значение окажется меньше минимального, оно игнорируется, и функция воспринимается как представляющая только минимальное значение.

Функция minmax() принимает 6 типов значений:

  • Единицы длины
  • Проценты
  • Гибкие размеры
  • max-content
  • min-content
  • auto

Рассмотрим примеры каждого из них.

Длина

Наверное, самое простое значение, что мы можем использовать с функцией minmax() — обычная длина. Возьмем, например, этот простой грид, с тремя колонками и одним рядом.

grid-

С помощью функции minmax() мы можем указать, что желтая грид-ячейка остается в пределах от 100px до 200px . При изменении размеров окна абсолютное значение будет меняться, но всегда между этими границами.

Вторая и третья колонки сжимаются и расширяются до заполнения оставшегося свободного места поровну, но первая всегда остается шириной от 100px до 200px .

Проценты

Помимо обычных единиц длины, с функцией minmax() можно использовать и проценты. Допустим, к примеру, что мы захотели, чтобы желтая грид-ячейка занимала максимум 50% грида, но не ужималась меньше 200px.

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

Гибкие размеры

Гибкие размеры — новая единица, тоже введенная спецификацией CSS Grid Layout, как и функция minmax() . Эта величина, для которой используется единица fr , представляет собой долю свободного пространства в грид-контейнере. Например, скажем, у нас есть грид шириной 100px с двумя колонками. У одной колонки фиксированная ширина 20px , а у другой ширина 1fr . У второй колонки фактически будет ширина 80px , поскольку она занимает всё оставшееся свободное место в гриде.

На данный момент единица fr может использоваться только для максимального значения в функции minmax() (хотя в спецификации отмечено, что в будущем может появиться возможность применять ее и для минимального значения). Возвращаясь к нашему примеру, можно указать, что наша желтая ячейка должна быть шириной минимум 200px. Если окно браузера станет шире этого, эта ячейка должна быть размером 1fr , т.е. равна двум другим колонкам.

Поскольку при больших размерах окна ширина всех колонок 1fr, они делят пространство в гриде поровну.

max-content

Ключевое слово max-content — специальное значение, представляющее собой «идеальный размер» ячейки. Это наименьший возможный размер ячейки, при котором содержимое умещается в ней свободно. Например, если содержимое ячейки — предложение текста, идеальной шириной ячейки будет полная длина этого предложения, если записать его в одну строку без переносов.

Если взять наш предыдущий пример, давайте укажем для желтой грид-ячейки и минимальный, и максимальный размер, равный max-content .

Как видно, колонка растягивается в ширину, чтобы вместить всю длину строки. Поскольку и максимальному, и минимальному значениям указано max-content , ширина колонки остается постоянной (прим. перев.: того же эффекта можно было бы добиться и без minmax , указав просто grid-template-columns: max-content 1fr 1fr ).

min-content

Ключевое слово min-content , как и max-content — особое значение. Оно представляет собой наименьший возможный размер, при котором в ячейке еще не возникает переполнения, если этого переполнения можно хоть как-то избежать.

Чтобы показать различие между min-content и max-content , можно взять содержимое из предыдущего примера, но в оба значения для функции minmax() подставить min-content .

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

Наконец, у нас есть auto . В зависимости от того, используется оно как максимальное или минимальное значение в функции minmax() , его смысл меняется.

Если значение auto используется в качестве максимума, оно эквивалентно значению max-content . А если в качестве минимума, то значение auto представляет собой наибольший минимальный размер для ячейки. Этот «наибольший минимальный размер» отличается от значения min-content и задается свойствами min-width/min-height .

В качестве иллюстрации — вот что происходит, если задать желтой грид-ячейке в нашем примере auto для минимума и максимума.

Использование функции minmax() : отзывчивый дизайн без медиавыражений

Как мы видели, использование функции minmax() подходит в нескольких случаях, и ее можно использовать несколькими способами. Но, наверное, самое популярное и полезное применение функции minmax() — возможность создавать отзывчивые макеты без помощи каких-либо медиавыражений.

Возьмем для примера такой грид:

У каждой колонки в гриде минимальная ширина 200px. При изменении размеров окна браузера число колонок меняется, чтобы вместить их идеальную ширину. С помощью CSS-гридов и функции minmax() это делается всего лишь 2 строчками CSS:

Помимо функции minmax() , здесь еще два ключевых момента:

  • repeat() : эта функция позволяет нам указывать одно и то же значение для нескольких колонок в гриде. Она принимает два значения: количество повторений и значение, которое надо повторить.
  • auto-fit : это ключевое слово можно использовать с функцией repeat() вместо количества повторений. Оно гибко меняет используемое число колонок в зависимости от ширины каждой из них.

Правда, одно, на мой взгляд серьезное, ограничение этого приема — то, что это работает только при равной ширине всех колонок. Мы вынуждены пользоваться функцией repeat() с ключевым словом auto-fit , так как это дает возможность сделать число колонок гибким. Но всё же и это может быть крайне полезным решением в подходящих обстоятельствах.

minmax()

minmax () это CSS ф ункция, определяющая диапазон размеров, который больше или равен min и меньше или равен max . Используется в CSS Grids.

Синтаксис

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

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

Если max < min , то max игнорируется и minmax(min,max) обрабатывается как min . As a maximum, a <flex> value sets the flex factor of a grid track; it is invalid as a minimum.

Добавить комментарий

Ваш адрес email не будет опубликован.