Bonjour à tous,
Toutes les templates de sites internet modernes utilisent des flexbox. Cette notion peut paraître très complexe car la courbe d'apprentissage de la fonctionnalité est plutôt raide au départ. J'avais dans un précédent article présenté un site internet très intéressant pour aider à simplifier cet apprentissage (vous pouvez retrouver cet article ici : Apprendre de façon ludique à utiliser la balise display: flex;.

Dans ce nouvel article, je vous présente un nouvel outil que j'ai complètement intégré à mon workflow lors de tâches d'intégration. Il me permet de gagner un temps fou, que j'aurais autrement passé à débuger mon design.

https://flexbox.help/

Vous pouvez choisir le nombre d'éléments à gérer

Ensuite, sélectionner les paramètres dont vous avez besoin, le résultat change en direct sur les éléments au-dessus.

Il ne vous reste plus qu'à copier-coller le code en sortie, et vous êtes assurés que vos éléments se disposeront correctement.

En utilisant cet outil, vous êtes certains d'utiliser directement le bon code. Avant je testais à la main jusqu'à ce que les paramètres (souvent parce que je ne sais pas quelle disposition je préfère, alors j'en teste plusieurs avant de faire un choix), maintenant cela est faisable sur ce site simplement en cliquant sur les différents boutons.

J'espère que cet outil vous servira dans le futur, si vous connaissez d'autres outils du même type, n'hésitez pas à poster un commentaire pour m'en informer. Je serai ravi de le/les tester.

Si cette catégorie d'articles vous plait, vous pouvez vous abonner à la Newsletter.