{"id":5421,"date":"2024-08-27T18:52:58","date_gmt":"2024-08-27T18:52:58","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/facteur-retrecissement-flexbox-flex-shrink\/"},"modified":"2024-08-27T18:53:01","modified_gmt":"2024-08-27T18:53:01","slug":"facteur-retrecissement-flexbox-flex-shrink","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/facteur-retrecissement-flexbox-flex-shrink\/","title":{"rendered":"8.8 Facteur de R\u00e9tr\u00e9cissement en Flexbox : flex-shrink"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Le facteur de r\u00e9tr\u00e9cissement en Flexbox (flex-shrink)<\/strong> joue un r\u00f4le majeur dans la gestion de l&rsquo;espace et la disposition des \u00e9l\u00e9ments en CSS. Comprendre comment utiliser le <strong>facteur de r\u00e9tr\u00e9cissement<\/strong> peut grandement am\u00e9liorer la flexibilit\u00e9 et la r\u00e9activit\u00e9 de vos mises en page. Apprenons comment il fonctionne et comment l&rsquo;impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction au <strong>Facteur de R\u00e9tr\u00e9cissement 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\/586656923?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) {\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();\n    }\n});\n<\/script>\n\n\n\n<p>Le <code>flex-shrink<\/code> est une propri\u00e9t\u00e9 de CSS Flexbox qui d\u00e9termine la capacit\u00e9 d&rsquo;un \u00e9l\u00e9ment flexible \u00e0 r\u00e9tr\u00e9cir si n\u00e9cessaire. Si les \u00e9l\u00e9ments de la bo\u00eete flex contiennent plus d&rsquo;espace qu&rsquo;il n&rsquo;en est disponible, la propri\u00e9t\u00e9 <code>flex-shrink<\/code> influence la r\u00e9duction de chaque \u00e9l\u00e9ment.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de la Propri\u00e9t\u00e9 <code>flex-shrink<\/code><\/h3>\n\n\n\n<p>Voyons comment appliquer <code>flex-shrink<\/code> en pratique. Supposons que nous avons trois divs enfants, tous \u00e0 l&rsquo;int\u00e9rieur d&rsquo;un conteneur flex. Par d\u00e9faut, chaque \u00e9l\u00e9ment a un <code>flex-shrink<\/code> de 1, ce qui signifie qu&rsquo;ils r\u00e9tr\u00e9ciront tous \u00e0 un rythme \u00e9gal s&rsquo;il y a exc\u00e8s de contenu.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n}\n\n.item {\n  flex-shrink: 1; \/* Par d\u00e9faut *\/\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple de code, chaque <code>.item<\/code> r\u00e9tr\u00e9cira \u00e0 un rythme \u00e9gal lorsque plus d&rsquo;espace est n\u00e9cessaire.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Valeurs Personnalis\u00e9es pour <code>flex-shrink<\/code><\/h3>\n\n\n\n<p>Pour mieux comprendre l&rsquo;impact de diff\u00e9rentes valeurs, consid\u00e9rons un exemple o\u00f9 nous d\u00e9finissons des valeurs personnalis\u00e9es pour <code>flex-shrink<\/code> sur chacun des \u00e9l\u00e9ments:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"item\" style=\"flex-shrink: 2;\"&gt;Item 1&lt;\/div&gt;\n  &lt;div class=\"item\" style=\"flex-shrink: 3;\"&gt;Item 2&lt;\/div&gt;\n  &lt;div class=\"item\" style=\"flex-shrink: 1;\"&gt;Item 3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous voyons que <code>Item 2<\/code> r\u00e9tr\u00e9cira trois fois plus vite que <code>Item 3<\/code>, et <code>Item 1<\/code> r\u00e9tr\u00e9cira deux fois plus vite.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple de Code Complet avec <code>flex-shrink<\/code><\/h3>\n\n\n\n<p>Prenons maintenant un exemple de code complet pour voir comment le <code>flex-shrink<\/code> pourrait \u00eatre utilis\u00e9 dans une mise en page r\u00e9elle:<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;title&gt;Flex Shrink Example&lt;\/title&gt;\n    &lt;style&gt;\n        .container {\n            display: flex;\n            width: 100%;\n            background: #ddd;\n        }\n        .item {\n            flex: 1;\n            padding: 10px;\n            margin: 5px;\n            background: #f4f4f4;\n        }\n        .item1 { flex-shrink: 2; }\n        .item2 { flex-shrink: 3; }\n        .item3 { flex-shrink: 1; }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"item item1\"&gt;Item 1&lt;\/div&gt;\n        &lt;div class=\"item item2\"&gt;Item 2&lt;\/div&gt;\n        &lt;div class=\"item item3\"&gt;Item 3&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Observation des Effets de <code>flex-shrink<\/code><\/h3>\n\n\n\n<p>En redimensionnant le conteneur, on pourra observer le r\u00e9tr\u00e9cissement in\u00e9gal des \u00e9l\u00e9ments en fonction des valeurs de <code>flex-shrink<\/code>. Cette in\u00e9galit\u00e9 permet de contr\u00f4ler pr\u00e9cisement le comportement des \u00e9l\u00e9ments dans des sc\u00e9narios o\u00f9 l&rsquo;espace est limit\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Application Pratique de <code>flex-shrink<\/code> dans un Projet R\u00e9el<\/h3>\n\n\n\n<p>Dans des projets r\u00e9els, le <code>flex-shrink<\/code> peut \u00eatre utilis\u00e9 pour maintenir des proportions sp\u00e9cifiques entre les \u00e9l\u00e9ments flexibles. Par exemple, des cartes de profil utilisateur dans une grille Flexbox o\u00f9 certains profils peuvent contenir plus d&rsquo;information que d&rsquo;autres.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"profile\" style=\"flex-shrink: 2;\"&gt;\n    &lt;h2&gt;Nom de Profil 1&lt;\/h2&gt;\n    &lt;p&gt;Beaucoup plus d'informations ici...&lt;\/p&gt;\n  &lt;\/div&gt;\n  &lt;div class=\"profile\" style=\"flex-shrink: 1;\"&gt;\n    &lt;h2&gt;Nom de Profil 2&lt;\/h2&gt;\n    &lt;p&gt;Moins d'informations ici.&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Comme illustr\u00e9 ci-dessus, <code>flex-shrink<\/code> aide \u00e0 \u00e9quilibrer la mise en page de mani\u00e8re dynamique en s&rsquo;assurant que les diff\u00e9rents \u00e9l\u00e9ments r\u00e9tr\u00e9cissent proportionnellement selon vos besoins.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur le Facteur de R\u00e9tr\u00e9cissement (Flex-Shrink)<\/h2>\n\n\n\n<p>Le <strong>facteur de r\u00e9tr\u00e9cissement en Flexbox (flex-shrink)<\/strong> est une propri\u00e9t\u00e9 puissante qui am\u00e9liore consid\u00e9rablement la flexibilit\u00e9 de votre mise en page CSS. En apprenant \u00e0 utiliser <code>flex-shrink<\/code>, vous pouvez cr\u00e9er des interfaces utilisateur plus adaptables et r\u00e9actives. Pour plus de tutoriels sur Flexbox, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/css-flexbox-de-d\u00e9butant-\u00e0-expert\/200\">Flexbox de D\u00e9butant \u00e0 Expert<\/a>. Pour une introduction aux bases de Flexbox, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/introduire-les-bases-de-flexbox\">tutoriel d\u00e9taill\u00e9 sur les bases de Flexbox<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.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<!-- Liens internes -->\n<div>\n  <p>Pour d\u00e9velopper vos connaissances sur HTML, consultez les articles suivants :<\/p>\n  <ul>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">Le Fonctionnement d&rsquo;un Navigateur Web<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">Les Bases du Langage HTML<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">Cr\u00e9er sa Premi\u00e8re Page HTML<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">Tout savoir sur l&rsquo;\u00c9l\u00e9ment HTML Head<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\">Guide Complet des \u00c9l\u00e9ments Textuels en HTML<\/a><\/li>\n  <\/ul>\n  <p>Pour aller plus loin dans vos comp\u00e9tences CSS, d\u00e9couvrez ces ressources suppl\u00e9mentaires :<\/p>\n  <ul>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">Les Bases de la Syntaxe CSS<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/boites-css-bases-indispensables\">Les Bases Indispensables des Bo\u00eetes CSS<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\">Le Responsive Design avec les Media Queries CSS<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout\">Pr\u00e9sentation du CSS Grid Layout<\/a><\/li>\n    <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-pseudo-classes-css-guide\">Utilisation des Pseudo-Classes en CSS<\/a><\/li>\n  <\/ul>\n<\/div>\n\n<!-- Liens externes -->\n<div>\n  <p>Pour plus d&rsquo;informations sur Flexbox et des ressources externes, consultez les liens suivants :<\/p>\n  <ul>\n    <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/flex-shrink\" target=\"_blank\" rel=\"noopener\">Documentation de la propri\u00e9t\u00e9 flex-shrink sur MDN<\/a><\/li>\n    <li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/flex-shrink\/\" target=\"_blank\" rel=\"noopener\">Guide complet sur flex-shrink par CSS-Tricks<\/a><\/li>\n    <li><a href=\"https:\/\/www.w3schools.com\/cssref\/css3_pr_flex-shrink.asp\" target=\"_blank\" rel=\"noopener\">Tutoriel sur flex-shrink par W3Schools<\/a><\/li>\n    <li><a href=\"https:\/\/www.freecodecamp.org\/news\/a-visual-guide-to-css-flexbox-properties-d37b3d7f5ef3\/\" target=\"_blank\" rel=\"noopener\">Guide visuel de Flexbox par freeCodeCamp<\/a><\/li>\n  <\/ul>\n<\/div>\n\u00ab\u00a0`\n\nVoil\u00e0 les modifications appliqu\u00e9es pour inclure les optimisations SEO, assurer une longueur ad\u00e9quate de l&rsquo;article, ins\u00e9rer les liens internes et externes, et int\u00e9grer la banni\u00e8re pour promouvoir la formation sur la plateforme Learnify. La vid\u00e9o Vimeo est bien positionn\u00e9e sous le premier H2 de l&rsquo;article avec les instructions suppl\u00e9mentaires pour afficher une popup offre sp\u00e9ciale apr\u00e8s 2 minutes de visionnage.","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Le facteur de r\u00e9tr\u00e9cissement en Flexbox (flex-shrink) joue un r\u00f4le majeur dans la gestion de l&rsquo;espace et la disposition des \u00e9l\u00e9ments en CSS. Comprendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2736,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5421","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\/5421","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=5421"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5421\/revisions"}],"predecessor-version":[{"id":5422,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5421\/revisions\/5422"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2736"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}