Что означает единица fr в приложении стиля в стиле CSS Windows 8?

Ответ 1

Он обозначает "фракцию" или "дробную единицу", предлагаемую единицу в уровне CSS 3.

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

Значения фракции - это новые единицы, применимые к свойствам grid-rows и 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 - это одна "дробная единица", которая является способом сказать "оставшееся пространство в элементе".

Ответ 2

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

1fr = 562px

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

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

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