Един невероятно полезен новости CSS спецификацията Grid Layout - MinMax () функция. Тази функция ни дава възможност да пиша по-мощен и стегнат CSS, което ви позволява да зададете като стойност за функцията мрежа лента, включително минимална и максимална стойност.
MinMax () функция
MinMax () функция се два параметъра, минималната и максималната стойност.
Ако тази максимална стойност е по-ниска от минималната, тя се игнорира и функцията се възприема само като представляващи минимална стойност.
MinMax () функция се стойност 6 вида:
Да разгледаме примери за всеки от тях.
Може би най-прост смисъл, че ние можем да използваме, за да MinMax () функция - обичайната дължина. Вземете, например, този прост мрежа с три колони и един ред.
С MinMax (функция) можем да се уточни, че жълтата решетка клетка е в диапазона от 100 пиксела на 200px. Когато прозорецът е оразмерен, абсолютната стойност ще варира, но винаги между тези граници.
Втората и третата колона се компресира и се разширява, за да запълни останалите пространство еднакво, но първата е винаги ширината от 100 пиксела на 200px.
В допълнение към конвенционалните единици на дължина, функция с MinMax () може да се използва и проценти. Да предположим, например, че ние искахме да жълто мрежова клетка е заета от не повече от 50% от електрическата мрежа, но не се компресира по-малко от 200px.
Тъй като ние не са стеснени прозореца на браузъра, жълто поле никога няма да бъде по-малко от 200px. Но когато на мястото, е, че се разтяга до максимум половината от ширината на решетката.
гъвкави опаковки
Гъвкавите размери - нова единица се въведе спецификация CSS Решетка оформление, като MinMax (функция). Тази стойност, която се използва за единица FR. Тя представлява част от свободно пространство в мрежата на контейнера. Да предположим, че имаме широчина решетка на 100 пиксела с две колони. В една колона фиксирана ширина 20px. и от друга ширина 1fr. Втората колона всъщност ще бъде 80px ширина. защото това отнема цялото оставащото място в таблицата.
В момента FR единица може да се използва в MinMax () функции само за максималната стойност (въпреки че в спецификацията отбележи. Това в бъдеще може да е възможно да се прилага за определяне на минимални стойности). Връщайки се към нашия пример, можете да укажете, че нашата жълта клетка трябва да има широчина най-малко 200px. Ако прозореца на браузъра ще бъде по-широк от този, тази клетка трябва да бъде размерът на 1fr. т.е. Тя е равна на другите две колони.
От големия размер на ширината на прозореца на всички колони 1fr, те споделят пространство в мрежата, равномерно.
макс съдържание
Ключова дума макс-съдържание - специална стойност, която представлява "идеалният размер" на клетката. Това е най-малкия възможен размер на клетката, в която съдържанието могат да се поберат в него свободно. Например, ако съдържанието клетъчни - изречение, идеалното ширината на клетката ще бъде общата дължина на това предложение, ако го напиша в един ред, без сричкопренасяне.
Ако вземем предишния пример, нека посочим за жълтата решетка клетка и минимален и максимален размер на макс-съдържание.
Както може да се види, колона разпъва по ширина за да побере цялата дължина на низа. Тъй като и максималните и минималните стойности посочено макс съдържание. ширина колона остава постоянно (приблизително Perevi същият ефект може да се постигне и bezminmax определяне prostogrid-шаблонни колони: .. макс съдържание 1fr 1fr).
мин съдържание
Ключова дума мин-съдържание. като макс съдържание - от особено значение. Това е най-малкия възможен размер, в който клетката все още не е препълване възниква, когато това преливане може по някакъв начин да се избегне.
За да се покаже разликата между мин-макс-съдържание и съдържанието. Можете да вземете съдържанието на предишния пример, но двете стойности за функция MinMax () заместител мин-съдържание.
Това може да се види, че съдържанието на клетката се прехвърля, така че да заемат по-малко пространство, хоризонтално, без да причини преливане.
На последно място, ние имаме автоматично. В зависимост от това дали се използва като функция на максималната или минималната стойност MinMax (). значението му се променя.
Ако автоматичното стойност се използва като максимумът е еквивалентна на стойност макс-съдържание. И ако, като минималната стойност на функцията за автоматично е минималният размер на най-голямата клетка. Тази "минимален размер от най-големите" се различава от стойността мин-съдържание и свойства, дадени от мин ширина / мин височина.
Като илюстрация - това е, което се случва, ако сте задали жълтата решетка клетка в нашия автомобил например минимален и максимален.
Използване MinMax (функция). адаптивен дизайн без mediavyrazheny
Както видяхме, използването на функцията MinMax () е подходяща в някои случаи, и то може да се използва по няколко начина. Но може би функцията най-популярните и полезни MinMax приложение () - възможност за създаване отзивчиви оформления без помощта на който и да е mediavyrazheny.
Вземете за пример една мрежа:
Всяка колона в минимален мрежа ширина на 200px на. Когато размерът на прозореца на браузъра се променя броя на колоните, които подхождат на идеалната ширина. С CSS-мрежи и функции MinMax () това е направено само 2 линии на CSS:
В допълнение MinMax (функция). Има две основни точки:
- Повтарям (). Тази функция позволява да се уточни и съща стойност за няколко колони в мрежата. Отнема две стойности: броя на повторенията и стойността, която трябва да се повтори.
- авто-удобно. Тази ключова дума може да се използва да се повтаря функция () вместо броя на повторенията. Той се използва за гъвкаво променят броя на колоните, въз основа на широчината на всяка от тях.
Въпреки това, едно нещо, по мое мнение сериозно ограничение на този метод - е, че той работи само когато равна на широчината на всички колони. Ние трябва да използвате функцията повторение () с ключовата дума автоматично побиране. тъй като тя дава възможност да броя на колоните гъвкави. И все пак, и това може да бъде много полезно решение в правилните обстоятелства.
Послепис Може също така да се интересуват от:
По-малко от шест месеца след датата на последния промяната в W3C работен процес, тъй като ръководството на консорциума са получили предложение да се прилага този нов процес в крайна сметка по случая. И отписване е без значение HTML спецификация на музея, така че те не са объркани разработчиците ", който се представя за" значение.
Друг CSS модул, което ни казаха тихо падежът на статута, с които W3C съветва да започне рутинното използване на нови продукти. съдържа имот ви позволява да ограничите промяната на чертежа на дърво, прекрояване на CSS-кутии и да промените размера им в рамките на елемента. Ето защо е толкова важно ...
ОЩЕ
От Париж (на снимката), който наскоро премина CSS заседание на работната група, пристигнала забавни новини: Имоти решетка ред дефицит и решетка-колона-празнина, както и намаляването на решетка-празнина ...
Свързани статии