Ce qui ne l'unité fr dans un CSS Windows 8 metro application de style signifie?

En regardant le code CSS suivant dans Windows 8 metro style de l'application, ce qui est "fr"?

-ms-grid-columns: 638px 1fr;
InformationsquelleAutor Paul Mendoza | 2012-03-10
  1. 40

    Il est synonyme de "fraction" ou "fractions de l'unité", un projet d'unité dans le CSS Niveau 3.

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

    Les valeurs de Fraction sont de nouvelles unités applicables à la grille de lignes et de grille-propriétés des colonnes...
    La distribution des fractions de l'espace se produit après tous ou le contenu de ligne de base et de la taille de colonne ont atteint leur maximum. La taille totale des lignes ou des colonnes est ensuite soustrait de l'espace disponible et le reste est réparti proportionnellement entre les fractions de lignes et de colonnes.

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

    ...les fractions de l'unité (1FR)... représente une action de tout l'espace disponible de la grille après de taille fixe et automatique de la taille des pistes (lignes ou colonnes) sont définies.

    Aussi, à partir de http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/95fddeb2-04bc-4f2b-bfb6-ffecffe5e8d5/:

    1fr est un "fractions de l'unité", qui est une manière de dire "l'espace restant dans l'élément".

    • Cela fait beaucoup plus de sens maintenant. Merci. Beaucoup mieux que d'avoir à utiliser des flotteurs et des fou des hacks CSS, comme nous avons dû avant.
    InformationsquelleAutor Luke Girvin
  2. 58

    Concernant exactement à votre question, pour cet exemple, supposons que la totalité de la largeur des colonnes est 1200px.
    Depuis la première colonne, la largeur est fixe, il occupera 638px et le reste de l'espace (562px) sera gratuite. Ainsi, dans ce cas,

    1fr = 562px

    Maintenant, supposons que votre style est comme suit:-

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

    Alors dans ce cas, l'espace libre restant de 562px sera divisé en trois parties et la deuxième colonne sera donné 1/3ème de l'espace et de la troisième colonne sera donnée 2/3ème de l'espace.

    • Cette réponse est bien mieux à mon humble avis.
    InformationsquelleAutor Gaurang