Что означает модуль fr в CSS-приложении Windows 8 в стиле metro?

Question

Глядя на следующий CSS в приложении в стиле Metro для Windows 8, что такое «fr»?

-ms-grid-columns: 638px 1fr;

Answer 1

Относительно вашего точного вопроса, для этого конкретного примера, давайте предположим, что общая доступная ширина для столбцов составляет 1200 пикселей. Поскольку ширина первого столбца фиксирована, он будет занимать 638 пикселей, а оставшееся пространство (562 пикселей) будет свободным. Таким образом, в этом случае

1fr = 562px

Теперь давайте предположим, что ваш стиль выглядит следующим образом: -

-ms-grid-columns: 638px 1fr 2fr;

Тогда в этом случае оставшееся свободное пространство в 562 пикселя будет разделено на три части, а второй столбец получит 1/3 пробела, а третий столбец - 2/3 пробела.

Answer 2

Это означает «дробь» или «дробная единица», предлагаемую единицу на уровне CSS 3.

С https://www.w3.org/TR/css3-grid-layout/#fr-unit:

Значения дроби - это новые единицы, применимые ксвойства grid-row и grid-columns ... Распределение дробного пространства происходит после того, как все или основанные на контенте размеры строк и столбцов достигли своего максимума.Общий размер строк или столбцов затем вычитается из доступного пространства, а остаток делится пропорционально между дробными строками и столбцами.

Из http://msdn.microsoft.com/en-us/library/windows/apps/hh780610.aspx:

... дробная единица (1FR) ... представляет одну долю всего пространства, доступного для сетки после размещения дорожек фиксированного размера и автоматического размера (строки или столбцы).

Кроме того, из http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/:

1fr - это одна «дробная единица», что означает «оставшееся пространство в элементе».