{"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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.8 - aioseo.com -->\n\t<meta name=\"description\" content=\"Le fonctionnement est simple, chaque exemple Flexbox est une mise en situation du besoin fourni avec : le code d\u00e9taill\u00e9, la d\u00e9mo, l&#039;exemple t\u00e9l\u00e9chargeable.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Geoffrey Crofte\"\/>\n\t<meta name=\"keywords\" content=\"flexbox,css,pwa,ressource,css \/ css3\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.8\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#article\",\"name\":\"Flexbox\\u00b7ninja \\u2013 Apprenez Flexbox avec des cas pratiques\",\"headline\":\"Flexbox\\u00b7ninja \\u2013\\u00a0Apprenez Flexbox avec des cas pratiques\",\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/flexboxninja@2x.png\",\"width\":200,\"height\":200},\"datePublished\":\"2019-04-07T16:50:32+02:00\",\"dateModified\":\"2025-12-18T21:31:01+01:00\",\"inLanguage\":\"fr-FR\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#webpage\"},\"articleSection\":\"CSS \\\/ CSS3, flexbox, PWA, ressource, Optional, CreativeJuiz\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3#listItem\",\"name\":\"CSS \\\/ CSS3\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3#listItem\",\"position\":2,\"name\":\"CSS \\\/ CSS3\",\"item\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#listItem\",\"name\":\"Flexbox\\u00b7ninja \\u2013\\u00a0Apprenez Flexbox avec des cas pratiques\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog#listItem\",\"name\":\"Accueil\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#listItem\",\"position\":3,\"name\":\"Flexbox\\u00b7ninja \\u2013\\u00a0Apprenez Flexbox avec des cas pratiques\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/theme\\\/css-css3#listItem\",\"name\":\"CSS \\\/ CSS3\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey\",\"name\":\"Geoffrey Crofte\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g\",\"width\":96,\"height\":96,\"caption\":\"Geoffrey Crofte\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#webpage\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques\",\"name\":\"Flexbox\\u00b7ninja \\u2013 Apprenez Flexbox avec des cas pratiques\",\"description\":\"Le fonctionnement est simple, chaque exemple Flexbox est une mise en situation du besoin fourni avec : le code d\\u00e9taill\\u00e9, la d\\u00e9mo, l'exemple t\\u00e9l\\u00e9chargeable.\",\"inLanguage\":\"fr-FR\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/auteur\\\/geoffrey#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/04\\\/flexboxninja@2x.png\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques\\\/#mainImage\",\"width\":200,\"height\":200},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/css-css3\\\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#mainImage\"},\"datePublished\":\"2019-04-07T16:50:32+02:00\",\"dateModified\":\"2025-12-18T21:31:01+01:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/\",\"name\":\"Creative Juiz\",\"description\":\"HTML5, CSS3, JavaScript, WordPress Tutorials\",\"inLanguage\":\"fr-FR\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.creativejuiz.fr\\\/blog\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Flexbox\u00b7ninja \u2013 Apprenez Flexbox avec des cas pratiques","description":"Le fonctionnement est simple, chaque exemple Flexbox est une mise en situation du besoin fourni avec : le code d\u00e9taill\u00e9, la d\u00e9mo, l'exemple t\u00e9l\u00e9chargeable.","canonical_url":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques","robots":"max-image-preview:large","keywords":"flexbox,css,pwa,ressource,css \/ css3","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#article","name":"Flexbox\u00b7ninja \u2013 Apprenez Flexbox avec des cas pratiques","headline":"Flexbox\u00b7ninja \u2013\u00a0Apprenez Flexbox avec des cas pratiques","author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/04\/flexboxninja@2x.png","width":200,"height":200},"datePublished":"2019-04-07T16:50:32+02:00","dateModified":"2025-12-18T21:31:01+01:00","inLanguage":"fr-FR","mainEntityOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#webpage"},"isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#webpage"},"articleSection":"CSS \/ CSS3, flexbox, PWA, ressource, Optional, CreativeJuiz"},{"@type":"BreadcrumbList","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","position":1,"name":"Accueil","item":"https:\/\/www.creativejuiz.fr\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3#listItem","name":"CSS \/ CSS3"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3#listItem","position":2,"name":"CSS \/ CSS3","item":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3","nextItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#listItem","name":"Flexbox\u00b7ninja \u2013\u00a0Apprenez Flexbox avec des cas pratiques"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog#listItem","name":"Accueil"}},{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#listItem","position":3,"name":"Flexbox\u00b7ninja \u2013\u00a0Apprenez Flexbox avec des cas pratiques","previousItem":{"@type":"ListItem","@id":"https:\/\/www.creativejuiz.fr\/blog\/theme\/css-css3#listItem","name":"CSS \/ CSS3"}}]},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/#person","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"Person","@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author","url":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey","name":"Geoffrey Crofte","image":{"@type":"ImageObject","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/c9e2509009badcdf656faf5019ef0f567c4dd4e6e49beca151c21d23995db473?s=96&d=monsterid&r=g","width":96,"height":96,"caption":"Geoffrey Crofte"}},{"@type":"WebPage","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#webpage","url":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques","name":"Flexbox\u00b7ninja \u2013 Apprenez Flexbox avec des cas pratiques","description":"Le fonctionnement est simple, chaque exemple Flexbox est une mise en situation du besoin fourni avec : le code d\u00e9taill\u00e9, la d\u00e9mo, l'exemple t\u00e9l\u00e9chargeable.","inLanguage":"fr-FR","isPartOf":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#breadcrumblist"},"author":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"creator":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/auteur\/geoffrey#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2019\/04\/flexboxninja@2x.png","@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques\/#mainImage","width":200,"height":200},"primaryImageOfPage":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/flexbox-ninja-apprenez-flexbox-avec-des-cas-pratiques#mainImage"},"datePublished":"2019-04-07T16:50:32+02:00","dateModified":"2025-12-18T21:31:01+01:00"},{"@type":"WebSite","@id":"https:\/\/www.creativejuiz.fr\/blog\/#website","url":"https:\/\/www.creativejuiz.fr\/blog\/","name":"Creative Juiz","description":"HTML5, CSS3, JavaScript, WordPress Tutorials","inLanguage":"fr-FR","publisher":{"@id":"https:\/\/www.creativejuiz.fr\/blog\/#person"}}]}},"aioseo_meta_data":{"post_id":"6727","title":null,"description":"Le fonctionnement est simple, chaque exemple Flexbox est une mise en situation du besoin fourni avec : le code d\u00e9taill\u00e9, la d\u00e9mo, l'exemple t\u00e9l\u00e9chargeable.","keywords":[{"label":"flexbox","value":"flexbox"},{"label":"CSS","value":"CSS"}],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","location":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"titles":[],"descriptions":[],"socialPosts":{"email":[],"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2020-12-21 17:16:17","updated":"2025-12-18 20:31:17","seo_analyzer_scan_date":null},"_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}]}}