36

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

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

2 に答える 2

62

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

1fr = 562px

今、あなたのスタイリングが次のようになっていると仮定しましょう:-

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

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

于 2013-07-25T04:35:54.557 に答える
42

CSS レベル 3 で提案されている単位である「fraction」または「fractional unit」の略です。

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 つの「分数単位」であり、「要素内の残りのスペース」を表す方法です。

于 2012-03-10T21:11:09.110 に答える