{"id":5409,"date":"2024-08-27T18:28:52","date_gmt":"2024-08-27T18:28:52","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/repartition-elements-flexbox-justify-content\/"},"modified":"2024-11-15T15:51:32","modified_gmt":"2024-11-15T15:51:32","slug":"repartition-elements-flexbox-justify-content","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/repartition-elements-flexbox-justify-content\/","title":{"rendered":"8.2 R\u00e9partition des \u00c9l\u00e9ments en Flexbox (justify-content)"},"content":{"rendered":"\n\n\n<p><strong>La r\u00e9partition des \u00e9l\u00e9ments en Flexbox (justify-content)<\/strong> est essentielle pour la conception web moderne, car elle d\u00e9termine comment les \u00e9l\u00e9ments sont align\u00e9s et distribu\u00e9s dans un conteneur. En apprenant \u00e0 utiliser la propri\u00e9t\u00e9 <strong>justify-content<\/strong> de Flexbox, vous pouvez cr\u00e9er des mises en page plus dynamiques et r\u00e9actives. Plongeons dans ce sujet avec des concepts clairs et des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la R\u00e9partition des \u00c9l\u00e9ments en Flexbox<\/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\/586656427?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>La propri\u00e9t\u00e9 <code>justify-content<\/code> de Flexbox permet de contr\u00f4ler l&rsquo;alignement et la distribution des \u00e9l\u00e9ments flexibles le long de l&rsquo;axe principal. Ce guide vous montrera comment utiliser les diverses options disponibles avec <code>justify-content<\/code> pour cr\u00e9er des mises en page polyvalentes et attrayantes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finitions et Pr\u00e9requis<\/h3>\n\n\n\n<p>Avant de commencer, assurez-vous de conna\u00eetre les bases de Flexbox, y compris la structure de base d&rsquo;un conteneur flex et de ses \u00e9l\u00e9ments enfants. En Flexbox, l&rsquo;axe principal est l&rsquo;axe le long duquel les \u00e9l\u00e9ments flexibles sont align\u00e9s. La propri\u00e9t\u00e9 <code>justify-content<\/code> agit donc sur cet axe principal. Pour plus d&rsquo;informations sur les bases du langage HTML et CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">guide des fondamentaux HTML<\/a> et notre <a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\">guide de r\u00e9daction CSS pour pages HTML<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>\/* Exemple de structure de base flex *\/\n.container {\n  display: flex;\n  justify-content: flex-start; \/* Valeur par d\u00e9faut *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Les Valeurs de justify-content<\/h3>\n\n\n\n<p>La propri\u00e9t\u00e9 <code>justify-content<\/code> accepte plusieurs valeurs pour g\u00e9rer la distribution des \u00e9l\u00e9ments flexibles le long de l&rsquo;axe principal.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">flex-start<\/h4>\n\n\n\n<p>Par d\u00e9faut, les \u00e9l\u00e9ments sont align\u00e9s au d\u00e9but du conteneur. Pour mieux comprendre comment les \u00e9l\u00e9ments peuvent \u00eatre align\u00e9s, vous pouvez consulter notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/alignement-horizontal-vertical-items-grid\">grille CSS de l&rsquo;alignement horizontal et vertical<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  justify-content: flex-start;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">flex-end<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments sont align\u00e9s \u00e0 la fin du conteneur.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  justify-content: flex-end;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">center<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments sont align\u00e9s au centre du conteneur. Pour plus de d\u00e9tails sur les diff\u00e9rents types de propri\u00e9t\u00e9s CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\">guide sur les propri\u00e9t\u00e9s CSS des textes<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  justify-content: center;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">space-between<\/h4>\n\n\n\n<p>L&rsquo;espace est r\u00e9parti uniform\u00e9ment entre les \u00e9l\u00e9ments, avec le premier \u00e9l\u00e9ment au d\u00e9but et le dernier \u00e0 la fin.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  justify-content: space-between;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">space-around<\/h4>\n\n\n\n<p>Les \u00e9l\u00e9ments ont un espace \u00e9gal autour d&rsquo;eux, incluant l&rsquo;espace avant le premier et apr\u00e8s le dernier \u00e9l\u00e9ment.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  justify-content: space-around;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">space-evenly<\/h4>\n\n\n\n<p>L&rsquo;espace entre les \u00e9l\u00e9ments est \u00e9galement r\u00e9parti, de mani\u00e8re uniforme, incluant les marges avant et apr\u00e8s le conteneur. Pour plus d&rsquo;informations sur comment g\u00e9rer les espaces et marges en CSS, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/interlignes-espacements-texte-css\">guide sur les interlignes et espacements en CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  justify-content: space-evenly;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Pratiques<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Distribuer les \u00c9l\u00e9ments<\/h4>\n\n\n\n<p>Voyons comment ces valeurs s&rsquo;appliquent dans un exemple concret. Pour un tutoriel facile sur la cr\u00e9ation de votre premi\u00e8re page HTML avec des exemples concrets, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">tutoriel HTML facile<\/a>.<\/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<p>Le CSS correspondant :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  justify-content: space-between; \/* Changez cette valeur pour voir diff\u00e9rents r\u00e9sultats *\/\n}\n.box {\n  width: 50px;\n  height: 50px;\n  background-color: #f00;\n  margin: 5px;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Centrage avec Flexbox<\/h4>\n\n\n\n<p>Pour centrer des \u00e9l\u00e9ments dans un conteneur, utilisez <code>justify-content: center;<\/code>. Pour plus d&rsquo;astuces sur le centrage des \u00e9l\u00e9ments avec Flexbox, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/centreur-elements-flexbox\">tutoriel sur le centrage des \u00e9l\u00e9ments avec Flexbox<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  justify-content: center;\n}\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser space-between pour des Menus<\/h4>\n\n\n\n<p>Pour des menus de navigation, <code>space-between<\/code> est id\u00e9al pour bien r\u00e9partir les \u00e9l\u00e9ments. D\u00e9couvrez plus de techniques pratiques pour les menus de navigation en lisant notre <a href=\"https:\/\/wikiform.fr\/codespace\/menus-navigation-flexbox\">guide des menus de navigation avec Flexbox<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.nav {\n  display: flex;\n  justify-content: space-between;\n}\n.nav-item {\n  padding: 10px;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>En ma\u00eetrisant la propri\u00e9t\u00e9 <strong>justify-content<\/strong> de Flexbox, vous pouvez cr\u00e9er des mises en page plus flexibles et align\u00e9es de mani\u00e8re pr\u00e9cise. Que ce soit pour la cr\u00e9ation de menus, la r\u00e9partition des cartes d&rsquo;une galerie ou le centrage d&rsquo;\u00e9l\u00e9ments, la compr\u00e9hension de <code>justify-content<\/code> est un outil essentiel dans votre arsenal de conception web. Pour aller plus loin, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/flexbox-approfondie\/141\">cours approfondi sur Flexbox<\/a>.\n\nPour plus d&rsquo;informations et techniques avanc\u00e9es, jetez un \u0153il \u00e0 notre <a href=\"https:\/\/wikiform.fr\/codespace\/propriete-raccourcie-background-css-guide\">guide sur les propri\u00e9t\u00e9s raccourcies de background CSS<\/a>. Pour des informations compl\u00e8tes sur les layouts Grid, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/presentation-grilles-css-grid-layout\">guide sur la pr\u00e9sentation des grilles CSS<\/a>.\n\nPour ceux qui souhaitent poursuivre leurs connaissances en HTML et CSS, je recommande ces liens internes utiles :\n&#8211; <a href=\"https:\/\/wikiform.fr\/codespace\/personnaliser-icone-site-html-favicon\">Personnaliser l&rsquo;ic\u00f4ne du site avec HTML<\/a>\n&#8211; <a href=\"https:\/\/wikiform.fr\/codespace\/maquette-site-html-comment-faire\">Comment cr\u00e9er une maquette de site HTML<\/a>\n&#8211; <a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\">Design responsive avec les m\u00e9dia queries CSS<\/a>\n<\/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 Web Offre 50%\" title=\"\"><\/a>\n\n\n","protected":false},"excerpt":{"rendered":"<p>La r\u00e9partition des \u00e9l\u00e9ments en Flexbox (justify-content) est essentielle pour la conception web moderne, car elle d\u00e9termine comment les \u00e9l\u00e9ments sont align\u00e9s et distribu\u00e9s dans&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2767,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5409","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\/5409","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=5409"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5409\/revisions"}],"predecessor-version":[{"id":6052,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5409\/revisions\/6052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2767"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}