{"id":6727,"date":"2019-04-07T16:50:32","date_gmt":"2019-04-07T14:50:32","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6727"},"modified":"2025-12-18T21:31:01","modified_gmt":"2025-12-18T20:31:01","slug":"flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques","title":{"rendered":"Flexbox\u00b7ninja \u2013\u00a0Apprenez Flexbox avec des cas pratiques"},"content":{"rendered":"<p><a href=\"https:\/\/geoffreycrofte.com\/flexbox-ninja\">Flexbox\u00b7ninja<\/a> est un projet que j&rsquo;ai commenc\u00e9 il y a quelques ann\u00e9es et que je n&rsquo;avais jamais pris le temps de finir et publier. Je voulais proposer au moins 6 cas pratiques, mais les gens du web m&rsquo;ont propos\u00e9 de la publier avec 3 cas et d&rsquo;ouvrir aux contributions. C&rsquo;est chose faite, voyons cela plus en d\u00e9tail.<\/p>\n<p><!--more--><\/p>\n<h2>Flexbox : un peu d&rsquo;histoire<\/h2>\n<p>Le projet a commenc\u00e9 avec la sp\u00e9cification du W3C il y a plus de 10 ans (oh oui d\u00e9j\u00e0 !). 2 ans apr\u00e8s, l&rsquo;id\u00e9e de commencer \u00e0 vulgariser le fonctionnement de CSS Flexbox m&rsquo;est venue car la sp\u00e9cification embarquait pas mal de nouveaut\u00e9s plut\u00f4t difficile \u00e0 comprendre, notamment parce que la syntaxe a \u00e9t\u00e9 revue \u00e0 plusieurs reprises, mais \u00e9galement parce que les navigateurs en avaient une interpr\u00e9tation assez disparate. \u00c7a s&rsquo;est d&rsquo;ailleurs am\u00e9lior\u00e9 mais il persiste toujours quelques disparit\u00e9s.<\/p>\n<p>L&rsquo;id\u00e9e d&rsquo;un tel outil permettant de parcourir des exemples \u00e0 travers des cas pratiques communs dans le quotidien d&rsquo;un int\u00e9grateur web\/d\u00e9veloppeur front-end \u00e9tait donc toujours valable. Voici comment <a href=\"https:\/\/geoffreycrofte.com\/flexbox-ninja\">Flexbox\u00b7ninja<\/a> a vu le jour il y a quelques semaines.<\/p>\n<h2>Flexbox\u00b7ninja : pr\u00e9sentation de l&rsquo;outil<\/h2>\n<p><a href=\"https:\/\/geoffreycrofte.com\/flexbox-ninja\"><img decoding=\"async\" class=\"alignnone wp-image-6730 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/04\/flexbox-ninja.png\" alt=\"Flexbox.ninja website\" width=\"2880\" height=\"1604\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/04\/flexbox-ninja.png 2880w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/04\/flexbox-ninja-300x167.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/04\/flexbox-ninja-768x428.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/04\/flexbox-ninja-600x334.png 600w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/a><\/p>\n<p>Le nom du site est un peu vantard, mais c&rsquo;\u00e9tait plus pour l&rsquo;originalit\u00e9 du domaine que pour le niveau d&rsquo;exhaustivit\u00e9 du contenu, sachant que celui-ci n&#8217;embarque pour le moment que 3 exemples communs.<\/p>\n<p>Le fonctionnement est relativement simple, chaque exemple est une mise en situation du besoin dans une page depuis laquel vous pouvez acc\u00e9der :<\/p>\n<ul>\n<li>le code d\u00e9taill\u00e9 d&rsquo;une solution possible (j&rsquo;insiste sur 1 solution possible)<\/li>\n<li>la d\u00e9mo fournie<\/li>\n<li>la m\u00eame d\u00e9mo t\u00e9l\u00e9chargeable<\/li>\n<\/ul>\n<p>Le petit bonus depuis quelques semaines est la possibilit\u00e9 de t\u00e9l\u00e9charger la Progressive Web App sur votre smartphone. Facile pour les utilisateurs d&rsquo;android, il faudra l&rsquo;ajouter \u00e0 votre homepage pour les utilisateurs d&rsquo;iOS. L&rsquo;avantage c&rsquo;est que les contenus que vous avez d\u00e9j\u00e0 consult\u00e9s online resteront disponibles offline ;p<\/p>\n<p>Merci \u00e0 <a href=\"https:\/\/stephaniewalter.design\">St\u00e9phanie Walter<\/a> pour le petit ninja soit dit en passant \ud83d\ude42<\/p>\n<p>C&rsquo;est tout pour ce petit outil !<\/p>\n<h2>Roadmap de Flexbox.ninja<\/h2>\n<p><a href=\"https:\/\/github.com\/geoffreycrofte\/flexbox.ninja#roadmap\">La roadmap<\/a> est publique et disponible sur le <a href=\"https:\/\/github.com\/geoffreycrofte\/flexbox.ninja\">r\u00e9pertoire Github<\/a> du projet. Cela inclut de nouveaux exemples qui sont en cours de r\u00e9daction. Parmi les exemples \u00e0 illustrer \u00e0 venir :<\/p>\n<ul>\n<li><em>Align Icons<\/em> \u2013 ou comment aligner convenablement des ic\u00f4nes dans un conteneur.<\/li>\n<li><em>Vertical-Align Content<\/em> \u2013 ou comment centrer verticalement\u2026 ben quoi ?<\/li>\n<li><em>Flexible Sidebar<\/em> \u2013 explicite non ?<\/li>\n<li><em>Stepper Input<\/em> \u2013 un input stepper en quelques lignes de CSS.<\/li>\n<li><em>Card Group<\/em> \u2013 un ensemble de cards de m\u00eame dimension avec un wrapping automatique.<\/li>\n<li><em>Flexible Gallery (Masonry)<\/em> \u2013 pas encore s\u00fbr de l&rsquo;int\u00e9r\u00eat de celle-ci, mais pour le fun on peut reproduire une grille masonry.<\/li>\n<li><em>Pricing Table<\/em> \u2013 un tableau de prix avec tarif mis en avant.<\/li>\n<\/ul>\n<p>Mais si jamais vous avez des exemples que vous avez d\u00e9j\u00e0 trait\u00e9s vous pouvez parfaitement <a href=\"https:\/\/github.com\/geoffreycrofte\/flexbox.ninja#how-to-contribute\">contribuer en respectant la structure de projet<\/a> disponible \u00e9galement sur ce readme de Github. Vous serez bien s\u00fbr mentionn\u00e9 en tant que cr\u00e9ateurice de l&rsquo;exemple.<\/p>\n<h2>Et Grid layout ?<\/h2>\n<p>Flexbox \u00e0 l&rsquo;\u00e8re de Grid Layout : oui pour les trolls qui trolleront, je vous attends dans les commentaires \ud83d\ude42<\/p>\n<p>Bonne lecture !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flexbox\u00b7ninja est un projet que j&rsquo;ai commenc\u00e9 il y a quelques ann\u00e9es et que je n&rsquo;avais jamais pris le temps de finir et publier. Je voulais proposer au moins 6 cas pratiques, mais les gens du web m&rsquo;ont propos\u00e9 de la publier avec 3 cas et d&rsquo;ouvrir aux contributions. C&rsquo;est chose faite, voyons cela plus [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"1","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17],"tags":[604,768,134],"coauthors":[597],"class_list":["post-6727","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","tag-flexbox","tag-pwa","tag-ressource"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6727"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6727\/revisions"}],"predecessor-version":[{"id":8923,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6727\/revisions\/8923"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/6732"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6727"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}