web-dev-qa-db-ja.com

CSS Windows 8メトロスタイルアプリケーションのfrユニットはどういう意味ですか？

Windows 8メトロスタイルのアプリケーションで次のCSSを見ると、「fr」とは何ですか？

-ms-grid-columns: 638px 1fr;
csswindows-8internet-explorer-10
35
Paul Mendoza

これは「分数」または「分数単位」の略で、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）...は、固定サイズおよび自動サイズのトラック（行または列）がレイアウトされた後、グリッドで使用可能なすべてのスペースの1つのシェアを表します。

また、 http://social.msdn.Microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/ から：

1frは、「要素内の残りのスペース」を表す1つの「分数単位」です。

40
Luke Girvin

あなたの正確な質問に関連して、この特定の例では、列に使用可能な合計幅が1200pxであると仮定しましょう。最初の列幅は固定されているため、638ピクセルを占め、残りのスペース（562ピクセル）は空いています。したがって、この場合、

1fr = 562px

ここで、スタイリングが次のようになっていると仮定しましょう。-

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

この場合、残りの562pxの空き領域は3つの部分に分割され、2番目の列には1/3のスペースが与えられ、3番目の列には2/3のスペースが与えられます。

58
Gaurang