2014 dxdy logo

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

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




 
 Функция "minmax" в CSS Grid, как она работает?
Сообщение28.06.2018, 23:14 
Аватара пользователя
В некотором смысле, продолжение предыдущей темы про веб-дизайн.
Как именно работает функция 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 
Аватара пользователя
Ktina в сообщении #1323240 писал(а):
И от чего это зависит? От ширины окна? Но как именно?

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

-- 29.06.2018, 08:29 --

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

См здесь.

 
 
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 08:48 
Аватара пользователя
Mental в сообщении #1323284 писал(а):
При изменении размеров окна значение будет меняться, но всегда между этими границами.

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

 
 
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 08:54 
Аватара пользователя
Ktina в сообщении #1323287 писал(а):
Я понимаю, что будет изменяться, но как именно? Когда она будет 50, когда 200, а когда, скажем, 169?

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

 
 
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 16:27 
Ktina в сообщении #1323287 писал(а):
но как именно?
Откройте стандарт, ничего точнее вам нигде (кроме его пересказов) не предложат. Разве что если углубляться в то, что делает каждый конкретный браузер (это делать нужно только в крайней необходимости).

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

(Оффтоп)

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

 
 
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение29.06.2018, 23:01 
Аватара пользователя
Mental в сообщении #1323288 писал(а):
Если места хватает, то будет 200px. Если нет, то будет постепенно уменьшаться до минимального значения 50px.

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

 
 
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение30.06.2018, 11:52 
Аватара пользователя
Ktina в сообщении #1323480 писал(а):
Но как тогда быть с
repeat(auto-fill, minmax(60px, 1fr));

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

 
 
 
 Re: Функция "minmax" в CSS Grid, как она работает?
Сообщение30.06.2018, 12:02 
Ktina в сообщении #1323480 писал(а):
То есть, если я правильно понимаю, по умолчанию объект пытается принять как можно больший размер?
Совсем-совсем по умолчанию, когда у объекта никаких свойств нигде не прописано, объект принимает размер по размеру своего содержимого. А если содержимого нет, то размер будет нулевой. А дальше идут 100500 разных свойств и их комбинаций (например, разные свойства по-разному работают для строчных/блочных элементов или в зависимости от свойств родительского объекта).

 
 
 [ Сообщений: 8 ] 


Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group