La feuille de triche ultime Flexbox

Si vous êtes un concepteur Web, nous ne devrions vraiment pas avoir besoin de vous parler de Flexbox pour le moment. Même les non-internautes ont l'idée qu'il s'agit d'un puissant site Web adaptatif outil pour créer des pages qui organisent les mises en page de manière prévisible pour une belle apparence dans n'importe quelle fenêtre.

Cependant, savoir que c'est bon, ce n'est pas la même chose que de pouvoir l'utiliser, et bien qu'il n'y ait pas vraiment beaucoup de spécification Flexbox, comprendre comment tout cela s'emboîte peut sembler un peu difficile.

Notre guide du concepteur Web sur Flexbox est le moyen idéal pour s'y prendre, mais si vous avez du mal à faire tenir tous les différents éléments dans votre tête, nous avons trouvé une jolie feuille de triche Flexbox que vous voudrez garder en signet.

Donc, si vous ne parvenez pas à déterminer votre flex-grow à partir de votre étirement, rendez-vous sur FLEX. C'est le travail de Chris Malven à Malven Co. , un studio de conception et de développement interactif basé dans l'Iowa, et il contient toutes les propriétés Flexbox les plus importantes dont vous aurez besoin, présentées d'une manière visuelle simple qui ne vous enlève pas dans des explications verbeuses.

Aide-mémoire Flexbox

FLEX met toutes les propriétés Flexbox dont vous avez besoin à portée de main(Crédit d'image: Malven Co.)

Au lieu de cela, il montre ce que fait chaque propriété via une image merveilleusement minimale; trouvez simplement la propriété que vous souhaitez utiliser et cliquez dessus, et FLEX copiera le code dont vous avez besoin directement dans votre presse-papiers. Facile!

Malven explique que si de nombreuses ressources Flexbox sont brillantes pour apprendre les détails du fonctionnement des choses, il y a trop de choses à faire pour qu'elles servent de références rapides. «Je voulais quelque chose d'aussi condensé visuellement que possible», dit-il, «et facile à scanner visuellement. J'ai besoin de voir à quoi ressembleront les éléments stylisés en utilisant chacun correctement.

Et donc il a construit FLEX comme une feuille de triche visuelle Flexbox; il dit qu'il l'utilise tout le temps et que cela l'a aidé à devenir vraiment à l'aise avec la syntaxe Flexbox.

Vous pouvez trouver FLEX ici ; si vous le trouvez utile et souhaitez qu'il y ait une ressource similaire pour CSS Grid Layout, alors devinez quoi? Tu es chanceux; Malven a construit cette chose même sous la forme de LA GRILLE , qui présente toutes les propriétés CSS Grid dans un format similaire à digérer.

Articles Liés: