{"id":5407,"date":"2024-08-27T18:25:44","date_gmt":"2024-08-27T18:25:44","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modele-boite-flexible-flexbox-css\/"},"modified":"2024-11-15T15:50:28","modified_gmt":"2024-11-15T15:50:28","slug":"modele-boite-flexible-flexbox-css","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modele-boite-flexible-flexbox-css\/","title":{"rendered":"8.1 Mod\u00e8le de Bo\u00eete Flexible en CSS : Utiliser Flexbox"},"content":{"rendered":"\n\n\n<p><strong>Mod\u00e8le de Bo\u00eete Flexible en CSS :<\/strong> Utiliser Flexbox permet de rendre votre mise en page plus dynamique et adaptable aux diff\u00e9rents formats d&rsquo;\u00e9cran. Comprendre et ma\u00eetriser le mod\u00e8le de bo\u00eete flexible avec Flexbox en CSS peut transformer vos comp\u00e9tences en design. Apprenons comment utiliser cette technologie en profondeur \u00e0 l&rsquo;aide d&rsquo;exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 Flexbox en CSS<\/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\/586656242?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>Flexbox en CSS, ou bo\u00eete flexible, est une m\u00e9thode moderne de disposition qui offre une distribution d&rsquo;espace efficace et un alignement puissant pour les \u00e9l\u00e9ments dans un conteneur, m\u00eame quand leur taille est inconnue et\/ou dynamique. Flexbox est con\u00e7u pour disposer des \u00e9l\u00e9ments le long d\u2019un axe (soit horizontalement ou verticalement) et offre une flexibilit\u00e9 pour ajuster l\u2019espace, la taille et l\u2019alignement des \u00e9l\u00e9ments enfants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">La Structure de Base de Flexbox<\/h3>\n\n\n\n<p>Pour commencer avec Flexbox, il faut d\u00e9finir un conteneur flex et des \u00e9l\u00e9ments enfants. Voici la structure de base avec HTML et CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n    &lt;div class=\"box\"&gt;1&lt;\/div&gt;\n    &lt;div class=\"box\"&gt;2&lt;\/div&gt;\n    &lt;div class=\"box\"&gt;3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n    display: flex;\n    background-color: lightgrey;\n}\n\n.box {\n    background-color: darkgrey;\n    border: 1px solid #000;\n    padding: 20px;\n    margin: 10px;\n    text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour des d\u00e9tails sur le contenu de l&rsquo;\u00e9l\u00e9ment d&rsquo;en-t\u00eate, consultez <a href=\"https:\/\/wikiform.fr\/codespace\/element-html-head-tout-savoir\">cet article<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Propri\u00e9t\u00e9s de Flexbox<\/h3>\n\n\n\n<p>Les propri\u00e9t\u00e9s flexbox sont divis\u00e9es en deux cat\u00e9gories : les propri\u00e9t\u00e9s pour le conteneur et les propri\u00e9t\u00e9s pour les \u00e9l\u00e9ments enfants. D\u00e9couvrez comment les utiliser pour am\u00e9liorer votre <a href=\"https:\/\/wikiform.fr\/codespace\/maquette-site-html-comment-faire\">maquette de site HTML<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Propri\u00e9t\u00e9s pour le Conteneur<\/h4>\n\n\n\n<p>Voici quelques-unes des principales propri\u00e9t\u00e9s \u00e0 utiliser pour l&rsquo;\u00e9l\u00e9ment conteneur :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>flex-direction<\/code>: d\u00e9finit l&rsquo;axe principal pour placer les \u00e9l\u00e9ments (par d\u00e9faut <code>row<\/code>).<\/li>\n\n\n\n<li><code>justify-content<\/code>: contr\u00f4le l&rsquo;alignement des \u00e9l\u00e9ments le long de l&rsquo;axe principal.<\/li>\n\n\n\n<li><code>align-items<\/code>: contr\u00f4le l&rsquo;alignement des \u00e9l\u00e9ments le long de l&rsquo;axe transversal.<\/li>\n\n\n\n<li><code>flex-wrap<\/code>: permet aux \u00e9l\u00e9ments de couper et aller \u00e0 la ligne suivante si n\u00e9cessaire.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    flex-wrap: wrap;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Propri\u00e9t\u00e9s pour les \u00c9l\u00e9ments Enfants<\/h4>\n\n\n\n<p>Les propri\u00e9t\u00e9s suivantes s&rsquo;appliquent aux \u00e9l\u00e9ments enfants :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>flex-grow<\/code>: indique combien d&rsquo;espace suppl\u00e9mentaire un \u00e9l\u00e9ment flexible devrait occuper.<\/li>\n\n\n\n<li><code>flex-shrink<\/code>: sp\u00e9cifie la capacit\u00e9 de l&rsquo;\u00e9l\u00e9ment \u00e0 r\u00e9tr\u00e9cir.<\/li>\n\n\n\n<li><code>flex-basis<\/code>: d\u00e9finit la taille initiale d&rsquo;un \u00e9l\u00e9ment.<\/li>\n\n\n\n<li><code>align-self<\/code>: permet de remplacer l&rsquo;alignement par d\u00e9faut \u00e9tabli par <code>align-items<\/code> pour des \u00e9l\u00e9ments individuels.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.box {\n    flex-grow: 1;\n    flex-shrink: 1;\n    flex-basis: 100px;\n    align-self: flex-start;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour un exemple pratique, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/element-titre-html-explications-guide\">guide sur les \u00e9l\u00e9ments de titre en HTML<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Disposition de Carte Flexbox<\/h3>\n\n\n\n<p>Utilisons Flexbox pour cr\u00e9er une disposition de carte r\u00e9active et \u00e9l\u00e9gante.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"card-container\"&gt;\n    &lt;div class=\"card\"&gt;Carte 1&lt;\/div&gt;\n    &lt;div class=\"card\"&gt;Carte 2&lt;\/div&gt;\n    &lt;div class=\"card\"&gt;Carte 3&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.card-container {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-around;\n    padding: 20px;\n    background-color: #f4f4f4;\n}\n\n.card {\n    flex: 1 1 200px; \/* flex-grow, flex-shrink, flex-basis *\/\n    margin: 10px;\n    padding: 20px;\n    background-color: #fff;\n    border: 1px solid #ddd;\n    border-radius: 8px;\n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n    text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Disposition R\u00e9active en Flexbox<\/h3>\n\n\n\n<p>Utiliser Flexbox permet de cr\u00e9er ais\u00e9ment des mises en page r\u00e9actives qui s\u2019ajustent selon la taille de l\u2019\u00e9cran. Voici un exemple de disposition en colonne sur les petits \u00e9crans et en lignes sur les grands \u00e9crans :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"responsive-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<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.responsive-container {\n    display: flex;\n    flex-direction: column; \/* Default to column on small screens *\/\n    padding: 10px;\n    background-color: #f9f9f9;\n}\n\n.item {\n    flex: 1;\n    margin: 10px;\n    padding: 20px;\n    background-color: #d1d1d1;\n    text-align: center;\n}\n\n\/* Media Query for larger screens *\/\n@media (min-width: 600px) {\n    .responsive-container {\n        flex-direction: row;\n    }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s de Flexbox<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Centrement Horizontal et Vertical<\/h4>\n\n\n\n<p>Flexbox est id\u00e9al pour centrer les \u00e9l\u00e9ments horizontalement et verticalement. Voici comment centrer une bo\u00eete \u00e0 la fois horizontalement et verticalement dans un conteneur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"centered-container\"&gt;\n    &lt;div class=\"centered-box\"&gt;Centr\u00e9&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.centered-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100vh; \/* Full height container *\/\n    background-color: #f0f0f0;\n}\n\n.centered-box {\n    padding: 50px;\n    background-color: #ff6347;\n    color: white;\n    text-align: center;\n    border-radius: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Disposition de Barre de Navigation<\/h4>\n\n\n\n<p>Cr\u00e9er une barre de navigation r\u00e9active avec Flexbox est tr\u00e8s intuitif. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;nav class=\"navbar\"&gt;\n    &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;About&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Services&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.navbar {\n    display: flex;\n    justify-content: space-around;\n    background-color: #333;\n    padding: 10px;\n}\n\n.navbar ul {\n    display: flex;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.navbar li {\n    margin: 0 15px;\n}\n\n.navbar a {\n    color: white;\n    text-decoration: none;\n    padding: 8px 15px;\n    border-radius: 5px;\n}\n\n.navbar a:hover {\n    background-color: #575757;\n}\n<\/code><\/pre>\n\n\n\n<p>Pour une lecture compl\u00e9mentaire, voyez notre <a href=\"https:\/\/wikiform.fr\/codespace\/generation-pages-html-guide-complet\">guide complet sur la g\u00e9n\u00e9ration de pages HTML<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Disposition de Grille Flexible<\/h4>\n\n\n\n<p>Vous pouvez cr\u00e9er des gr\n","protected":false},"excerpt":{"rendered":"<p>Mod\u00e8le de Bo\u00eete Flexible en CSS : Utiliser Flexbox permet de rendre votre mise en page plus dynamique et adaptable aux diff\u00e9rents formats d&rsquo;\u00e9cran. Comprendre&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2749,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5407","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\/5407","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=5407"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5407\/revisions"}],"predecessor-version":[{"id":6051,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5407\/revisions\/6051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2749"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}