2014 dxdy logo

Научный форум dxdy

Математика, Физика, Computer Science, Machine Learning, LaTeX, Механика и Техника, Химия,
Биология и Медицина, Экономика и Финансовая Математика, Гуманитарные науки




Начать новую тему Ответить на тему
 
 Функция "minmax" в CSS Grid, как она работает?
Сообщение28.06.2018, 23:14 
Аватара пользователя


01/12/11

8634
В некотором смысле, продолжение предыдущей темы про веб-дизайн.
Как именно работает функция minmax?
Предположим, я даю команду:

grid-template-columns: 100px minmax(50px, 200px);

В этом случае ширина первого столбца будет 100 пикселей, а второго - от 50 до 200. Но сколько именно в каждом конкретном случае? И от чего это зависит? От ширины окна? Но как именно?

Или вот такой пример:

repeat(auto-fill, minmax(60px, 1fr));

Какой размер будут принимать столбцы и в зависимости от чего?

Понимаю, что вопросы мои пока что "детские", но я делаю только первые шаги в веб-дизайне без малого две недели его изучаю. Хотелось бы когда-нибудь дойти до такого уровня, который позволил бы мне самостоятельно делать проекты. Сперва - учебные, а затем и "боевые".

 Профиль  
                  
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 08:18 
Аватара пользователя


29/05/17
632
Ktina в сообщении #1323240 писал(а):
И от чего это зависит? От ширины окна? Но как именно?

При изменении размеров окна значение будет меняться, но всегда между этими границами.

-- 29.06.2018, 08:29 --

Ktina в сообщении #1323240 писал(а):
Какой размер будут принимать столбцы и в зависимости от чего?

См здесь.

 Профиль  
                  
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 08:48 
Аватара пользователя


01/12/11

8634
Mental в сообщении #1323284 писал(а):
При изменении размеров окна значение будет меняться, но всегда между этими границами.

Я понимаю, что будет изменяться, но как именно? Когда она будет 50, когда 200, а когда, скажем, 169?

 Профиль  
                  
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 08:54 
Аватара пользователя


29/05/17
632
Ktina в сообщении #1323287 писал(а):
Я понимаю, что будет изменяться, но как именно? Когда она будет 50, когда 200, а когда, скажем, 169?

Если места хватает, то будет 200px. Если нет, то будет постепенно уменьшаться до минимального значения 50px.

 Профиль  
                  
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 16:27 
Заслуженный участник
Аватара пользователя


27/04/09
28075
Ktina в сообщении #1323287 писал(а):
но как именно?
Откройте стандарт, ничего точнее вам нигде (кроме его пересказов) не предложат. Разве что если углубляться в то, что делает каждый конкретный браузер (это делать нужно только в крайней необходимости).

-- Пт июн 29, 2018 18:28:31 --

(Оффтоп)

Эх, во времена древних интернетов просто бы написали «RTFM». :mrgreen:

 Профиль  
                  
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 23:01 
Аватара пользователя


01/12/11

8634
Mental в сообщении #1323288 писал(а):
Если места хватает, то будет 200px. Если нет, то будет постепенно уменьшаться до минимального значения 50px.

То есть, если я правильно понимаю, по умолчанию объект пытается принять как можно больший размер?
Но как тогда быть с
repeat(auto-fill, minmax(60px, 1fr));
?

 Профиль  
                  
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение30.06.2018, 11:52 
Аватара пользователя


29/05/17
632
Ktina в сообщении #1323480 писал(а):
Но как тогда быть с
repeat(auto-fill, minmax(60px, 1fr));

Вы разобрались, что такое fr?
Здесь размер элемента будет равен доли доступного пространства, но не менее 60px. Если вычисляемый размер будет меньше 60px, то следующий элемент будет размещён ниже на другой строке.

 Профиль  
                  
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение30.06.2018, 12:02 
Заслуженный участник


06/07/11
5604
кран.набрать.грамота
Ktina в сообщении #1323480 писал(а):
То есть, если я правильно понимаю, по умолчанию объект пытается принять как можно больший размер?
Совсем-совсем по умолчанию, когда у объекта никаких свойств нигде не прописано, объект принимает размер по размеру своего содержимого. А если содержимого нет, то размер будет нулевой. А дальше идут 100500 разных свойств и их комбинаций (например, разные свойства по-разному работают для строчных/блочных элементов или в зависимости от свойств родительского объекта).

 Профиль  
                  
Показать сообщения за:  Поле сортировки  
Начать новую тему Ответить на тему  [ Сообщений: 8 ] 

Модераторы: Karan, maxal, Toucan, PAV, Супермодераторы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group