{"id":5419,"date":"2024-08-27T18:48:48","date_gmt":"2024-08-27T18:48:48","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/facteur-expansion-flexbox-flex-grow\/"},"modified":"2024-08-27T18:48:52","modified_gmt":"2024-08-27T18:48:52","slug":"facteur-expansion-flexbox-flex-grow","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/facteur-expansion-flexbox-flex-grow\/","title":{"rendered":"8.7 Facteur d&rsquo;Expansion en Flexbox : Utiliser flex-grow"},"content":{"rendered":"\n<p><strong>Les facteurs d&rsquo;expansion en Flexbox<\/strong> permettent une gestion flexible et dynamique de la mise en page dans CSS. Comprendre comment utiliser <strong>flex-grow<\/strong> peut vous aider \u00e0 concevoir des interfaces utilisateur plus r\u00e9actives et \u00e0 maximiser l&rsquo;espace disponible de mani\u00e8re efficace. Apprenons comment fonctionne flex-grow et comment l&rsquo;int\u00e9grer dans vos projets gr\u00e2ce \u00e0 des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Facteur d&rsquo;Expansion en Flexbox<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586656824?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Le facteur d&rsquo;expansion <code>flex-grow<\/code> en Flexbox permet de d\u00e9finir la capacit\u00e9 d&rsquo;un \u00e9l\u00e9ment flex \u00e0 s&rsquo;agrandir pour occuper l&rsquo;espace vide disponible dans son conteneur. Cette propri\u00e9t\u00e9 est essentielle pour cr\u00e9er des mises en page adaptatives et flexibles. Jetons un coup d&rsquo;\u0153il \u00e0 quelques exemples pour comprendre son utilisation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer <code>flex-grow<\/code> sur des \u00c9l\u00e9ments Flex<\/h3>\n\n\n\n<p>Pour commencer, configurons un conteneur flex et des \u00e9l\u00e9ments flex enfants. Nous verrons comment <code>flex-grow<\/code> peut \u00eatre utilis\u00e9 pour contr\u00f4ler la mani\u00e8re dont ces \u00e9l\u00e9ments s&rsquo;agrandissent.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  width: 600px;\n  border: 1px solid #ccc;\n}\n\n.item {\n  flex-grow: 1;\n  border: 1px solid red;\n  padding: 10px;\n  margin: 5px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre le Comportement de <code>flex-grow<\/code><\/h3>\n\n\n\n<p>En cons\u00e9quence de la configuration ci-dessus, chaque \u00e9l\u00e9ment enfant de la div conteneur s&rsquo;agrandira pour occuper une part \u00e9gale de l&rsquo;espace disponible. Essayons maintenant de jouer avec diff\u00e9rentes valeurs de <code>flex-grow<\/code> pour voir comment cela impacte le rendu.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  width: 600px;\n  border: 1px solid #ccc;\n}\n\n.item1 {\n  flex-grow: 1;\n  border: 1px solid red;\n  padding: 10px;\n  margin: 5px;\n}\n\n.item2 {\n  flex-grow: 2;\n  border: 1px solid blue;\n  padding: 10px;\n  margin: 5px;\n}\n\n.item3 {\n  flex-grow: 3;\n  border: 1px solid green;\n  padding: 10px;\n  margin: 5px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>flex-grow<\/code> pour des Mises en Page Complexes<\/h3>\n\n\n\n<p>Enfin, voyons comment <code>flex-grow<\/code> peut \u00eatre utilis\u00e9 pour des mises en page plus complexes. Supposons que nous construisions un panneau de contr\u00f4le avec une barre lat\u00e9rale et une zone de contenu principal :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"dashboard\"&gt;\n  &lt;div class=\"sidebar\"&gt;Barre Lat\u00e9rale&lt;\/div&gt;\n  &lt;div class=\"main-content\"&gt;Contenu Principal&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.dashboard {\n  display: flex;\n  height: 100vh;\n}\n\n.sidebar {\n  flex-grow: 1;\n  background-color: #f4f4f4;\n  padding: 20px;\n}\n\n.main-content {\n  flex-grow: 3;\n  background-color: #fff;\n  padding: 20px;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, la barre lat\u00e9rale prend une part de l&rsquo;espace disponible tandis que la zone de contenu principal en prend trois fois plus. Cela permet de cr\u00e9er une mise en page fluide et adaptable qui utilise efficacement l&rsquo;espace disponible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>flex-grow<\/code> en Pratique<\/h3>\n\n\n\n<p>Les exemples ci-dessus montrent comment utiliser <code>flex-grow<\/code> pour vos besoins de mise en page. Vous pouvez exp\u00e9rimenter avec diff\u00e9rentes valeurs pour cr\u00e9er des interfaces utilisateur r\u00e9actives et attrayantes.<\/p>\n<p>Pour approfondir vos connaissances sur HTML, explorez ce <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">tutoriel sur la cr\u00e9ation d&rsquo;une premi\u00e8re page HTML<\/a> et ce <a href=\"https:\/\/wikiform.fr\/codespace\/contexte-navigation-imbrique-html\">guide sur le contexte de navigation imbriqu\u00e9 en HTML<\/a>.<\/p>\n\n<p>Pour en savoir plus sur Flexbox, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/medias-video-audio-html-guide\">tutoriel d\u00e9taill\u00e9 sur Flexbox<\/a>, explorez la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Flexible_Box_Layout\/Basic_Concepts_of_Flexbox\" target=\"_blank\" rel=\"noopener\">documentation officielle de MDN<\/a>, et d\u00e9couvrez nos <a href=\"https:\/\/wikiform.fr\/codespace\/modeles-boites-flexibles-flexbox-css\">mod\u00e8les de bo\u00eetes flexibles avec Flexbox en CSS<\/a>.<\/p>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Le <strong>facteur d&rsquo;expansion en Flexbox<\/strong>, ou <code>flex-grow<\/code>, est un outil puissant pour contr\u00f4ler la disposition des \u00e9l\u00e9ments dans une mise en page CSS. En ma\u00eetrisant cette propri\u00e9t\u00e9, vous pouvez cr\u00e9er des interfaces utilisateur dynamiques qui s&rsquo;adaptent \u00e0 diff\u00e9rentes tailles d&rsquo;\u00e9cran et offrent une meilleure exp\u00e9rience utilisateur. Continuez \u00e0 explorer cette propri\u00e9t\u00e9 pour d\u00e9couvrir ses nombreuses applications et optimiser vos designs web.<\/p>\n\n\n\n<a href=\"https:\/\/learnify.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/learnify.fr\/application\/learnify\/home\/course\/devenir-un-expert-en-css\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/learnify.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Les facteurs d&rsquo;expansion en Flexbox permettent une gestion flexible et dynamique de la mise en page dans CSS. Comprendre comment utiliser flex-grow peut vous aider&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2735,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5419","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5419"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5419\/revisions"}],"predecessor-version":[{"id":5420,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5419\/revisions\/5420"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2735"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}