Pourcentages par rapport aux unités « fr » dans la grille CSS : quelle est la différence ?

Quelle est la différence entre les unités de pourcentage et les unités fr ?

Lors de l'utilisation de la disposition en grille CSS, il existe deux unités courantes pour définir la largeur des colonnes : les pourcentages (%) et unités fr. Bien que les deux unités puissent être utilisées pour créer une disposition de grille flexible, elles se comportent différemment dans certaines situations.

Unités de pourcentage (%)

Les unités de pourcentage sont une unité relative qui fait référence à la largeur du conteneur. Par exemple, une colonne d'une largeur de 50 % occupera la moitié de la largeur du conteneur. Les unités de pourcentage sont souvent utilisées pour créer des colonnes à largeur fixe.

Cependant, les unités de pourcentage peuvent poser des problèmes lorsque la largeur du conteneur n'est pas explicitement définie. Par exemple, si le conteneur a une largeur automatique, la colonne s'agrandira ou se rétrécira pour s'adapter à l'espace disponible. Cela peut conduire à un comportement indésirable, en particulier dans les conceptions réactives.

Unités fr

Les unités fr sont une unité relative qui fait référence à l'espace libre disponible dans le conteneur. Par exemple, une colonne d'une largeur de 1fr occupera une partie égale de l'espace libre dans le conteneur. Les unités fr sont souvent utilisées pour créer des colonnes flexibles qui s'ajustent automatiquement à l'espace disponible.

Les unités fr ne sont pas affectées par la largeur du conteneur. Par exemple, si le conteneur a une largeur auto, la colonne occupera toujours une partie égale de l'espace libre. Cela rend les unités fr idéales pour créer des dispositions de grille réactives.

Conclusion

Les unités de pourcentage sont utiles pour créer des colonnes à largeur fixe, tandis que les unités fr sont utiles pour créer des colonnes flexibles. Lors du choix de l'unité à utiliser, il est important de prendre en compte le comportement souhaité de la colonne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!