{"id":5423,"date":"2024-08-27T18:56:29","date_gmt":"2024-08-27T18:56:29","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/taille-initiale-flexbox-flex-basis\/"},"modified":"2024-12-03T17:15:03","modified_gmt":"2024-12-03T17:15:03","slug":"taille-initiale-flexbox-flex-basis","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/taille-initiale-flexbox-flex-basis\/","title":{"rendered":"8.9 Taille Initiale en Flexbox : Utiliser flex-basis"},"content":{"rendered":"\n\n\n<p><strong>Taille initiale (flex-basis)<\/strong> est un module de disposition puissant qui permet aux d\u00e9veloppeurs de cr\u00e9er des mises en page r\u00e9actives et flexibles. Dans cet article, nous allons explorer l&rsquo;utilisation de l&rsquo;attribut <strong>flex-basis<\/strong> pour d\u00e9finir la taille initiale d&rsquo;un \u00e9l\u00e9ment flex. Apprenons comment utiliser <code>flex-basis<\/code> pour am\u00e9liorer la performance et l&rsquo;\u00e9lasticit\u00e9 de nos mises en page.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>flex-basis<\/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\/586656981?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>L&rsquo;attribut <code>flex-basis<\/code> dans Flexbox d\u00e9finit la <a href=\"https:\/\/wikiform.fr\/codespace\/taille-initiale-flexbox-flex-basis\" target=\"_blank\" rel=\"noopener\">taille initiale<\/a> de l&rsquo;\u00e9l\u00e9ment avant que l&rsquo;espace disponible soit distribu\u00e9 selon les r\u00e8gles de flex-grow et flex-shrink. Cela permet de contr\u00f4ler la taille pr\u00e9f\u00e9r\u00e9e d&rsquo;un \u00e9l\u00e9ment avant toute r\u00e9partition d&rsquo;espace. <code>flex-basis<\/code> peut \u00eatre d\u00e9fini en pixels, en pourcentage, ou avec une valeur de contenu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Syntaxe de <code>flex-basis<\/code><\/h3>\n\n\n\n<p>La syntaxe de <code>flex-basis<\/code> est simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>element {\n  flex-basis: 200px; \/* Ou en pourcentage, par exemple: 50% *\/\n} \n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation de <code>flex-basis<\/code> dans une Mise en Page<\/h3>\n\n\n\n<p>Voyons comment utiliser <code>flex-basis<\/code> pour cr\u00e9er une mise en page responsive. Nous allons cr\u00e9er un conteneur avec plusieurs \u00e9l\u00e9ments flexibles. Voici un exemple de base :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"item\"&gt;Item 1&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;Item 2&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;Item 3&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;style&gt;\n  .container {\n    display: flex;\n  }\n  .item {\n    flex-basis: 200px;\n    flex-grow: 1;\n    flex-shrink: 1;\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir plusieurs tailles de base<\/h3>\n\n\n\n<p>Nous pouvons \u00e9galement d\u00e9finir diff\u00e9rentes tailles de base pour chaque \u00e9l\u00e9ment selon les besoins :<\/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-basis: 100px\"&gt;Item 1&lt;\/div&gt;\n  &lt;div class=\"item\" style=\"flex-basis: 200px\"&gt;Item 2&lt;\/div&gt;\n  &lt;div class=\"item\" style=\"flex-basis: 300px\"&gt;Item 3&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;style&gt;\n  .container {\n    display: flex;\n  }\n  .item {\n    flex-grow: 1;\n    flex-shrink: 1;\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Avanc\u00e9: Galerie de Photos<\/h3>\n\n\n\n<p>Voici un exemple plus avanc\u00e9 d&rsquo;utilisation de <code>flex-basis<\/code> pour cr\u00e9er une galerie de photos responsive :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"gallery\"&gt;\n  &lt;div class=\"photo\"&gt;&lt;img src=\"photo1.jpg\" alt=\"Photo 1\"&gt;&lt;\/div&gt;\n  &lt;div class=\"photo\"&gt;&lt;img src=\"photo2.jpg\" alt=\"Photo 2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"photo\"&gt;&lt;img src=\"photo3.jpg\" alt=\"Photo 3\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;style&gt;\n  .gallery {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .photo {\n    flex-basis: calc(33.333% - 10px);\n    margin: 5px;\n  }\n  .photo img {\n    max-width: 100%;\n    height: auto;\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Assurer la R\u00e9activit\u00e9<\/h3>\n\n\n\n<p>Pour assurer la r\u00e9activit\u00e9, pensez \u00e0 utiliser des <em>media queries<\/em> en combinaison avec <code>flex-basis<\/code>. Voici comment ajuster la taille de base pour diff\u00e9rents points d&rsquo;arr\u00eat :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n  .photo {\n    flex-basis: calc(50% - 10px);\n  }\n}\n@media (max-width: 400px) {\n  .photo {\n    flex-basis: calc(100% - 10px);\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser les Performances<\/h3>\n\n\n\n<p>L&rsquo;utilisation correcte de <code>flex-basis<\/code> peut non seulement am\u00e9liorer la mise en page de <a href=\"https:\/\/wikiform.fr\/codespace\/repartition-elements-flexbox-justify-content\" target=\"_blank\" rel=\"noopener\">votre site<\/a>, mais aussi optimiser les performances en permettant aux navigateurs de calculer efficacement l&rsquo;espace et la disposition des \u00e9l\u00e9ments. Une taille de base bien d\u00e9finie permet aux \u00e9l\u00e9ments de s&rsquo;\u00e9tendre et de se compresser selon les contraintes de l&rsquo;espace disponible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur la Taille initiale (flex-basis)<\/h2>\n\n\n\n<p>En utilisant <code>flex-basis<\/code>, vous pouvez contr\u00f4ler la taille initiale de vos \u00e9l\u00e9ments flexibles de mani\u00e8re pr\u00e9cise et responsive. Cette approche vous permet de cr\u00e9er des mises en page robustes et adapt\u00e9es aux diff\u00e9rentes tailles d&rsquo;\u00e9cran. N&rsquo;oubliez pas de tester et d&rsquo;ajuster vos configurations pour obtenir des r\u00e9sultats optimaux. Continuez \u00e0 explorer les possibilit\u00e9s avec Flexbox pour ma\u00eetriser cet outil de mise en page puissant et flexible. Pour en savoir plus sur la personnalisation HTML, consultez nos guides sur la <a href=\"https:\/\/wikiform.fr\/codespace\/generation-pages-html-guide-complet\" target=\"_blank\" rel=\"noopener\">g\u00e9n\u00e9ration de pages HTML<\/a> et l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/personnaliser-icone-site-html-favicon\" target=\"_blank\" rel=\"noopener\">ajout de favicons<\/a> sur votre site.<\/p>\n\n\n\n<p>Pour approfondir vos connaissances sur le HTML et le CSS, vous pouvez explorer des articles tels que la <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-div-span-css-guide-complet\" target=\"_blank\" rel=\"noopener\">utilisation des conteneurs div et span avec CSS<\/a> ou les <a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\" target=\"_blank\" rel=\"noopener\">techniques de responsive design avec les media queries<\/a>.<\/p>\n\n\n\n<p style=\"text-align:center;\"><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\" style=\"max-width: 100%; height: auto;\" title=\"\"><\/a><\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Taille initiale (flex-basis) est un module de disposition puissant qui permet aux d\u00e9veloppeurs de cr\u00e9er des mises en page r\u00e9actives et flexibles. Dans cet article,&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2780,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5423","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\/5423","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=5423"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5423\/revisions"}],"predecessor-version":[{"id":6064,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5423\/revisions\/6064"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2780"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}