CSS Windows 8メトロスタイルアプリケーションのfr単位の意味は何ですか？

Question

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

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

Answer 1

それは「分数」または「分数の単位」、CSSレベルでの提案単位https://www.w3.org/TR/css3-grid-layout/#fr-unit 3.

の略：

分数の値はグリッド - に該当する新しいユニットです行とグリッド列のプロパティ... 分数スペースの分布は、すべてまたはコンテンツベースの行と列のサイズが最大に達した後に発生します。次に、使用可能なスペースから行または列の合計サイズが減算され、余りが分数の行および列に比例して分割されます。 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は「要素内の残りのスペース」という方法である一つの「分数単位」です。あなたの正確な質問に関する用語

Answer 2

、この特定の例のために、のは、列のために利用可能な総幅は1200pxであると仮定しましょう。 最初の列の幅は固定されているため、638pxを占め、残りのスペース（562px）は空きになります。したがって、この場合には、

1FR = 562px

今度は、次のようにあなたのスタイリングがあると仮定してみましょう： -

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

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