{"id":5417,"date":"2024-08-27T18:45:28","date_gmt":"2024-08-27T18:45:28","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ordre-apparition-flex-items-flexbox-order\/"},"modified":"2024-08-27T18:45:31","modified_gmt":"2024-08-27T18:45:31","slug":"ordre-apparition-flex-items-flexbox-order","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ordre-apparition-flex-items-flexbox-order\/","title":{"rendered":"8.6 Ordre d&rsquo;Apparition des Flex-items en Flexbox : order"},"content":{"rendered":"\n<p><strong>Ordre d&rsquo;Apparition des Flex-items en Flexbox : l&rsquo;attribut <code>order<\/code><\/strong> est un outil puissant pour contr\u00f4ler l&rsquo;ordre d&rsquo;affichage des \u00e9l\u00e9ments dans un conteneur Flexbox. Apprendre \u00e0 utiliser correctement l&rsquo;attribut <code>order<\/code> peut am\u00e9liorer la flexibilit\u00e9 et la conception de vos mises en page web. Apprenons comment il fonctionne et comment l\u2019impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;Attribut <code>order<\/code> 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\/586656763?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>order<\/code> en CSS permet de contr\u00f4ler l&rsquo;ordre de pr\u00e9sentation des items dans une mise en page Flexbox, ind\u00e9pendamment de leur ordre d&rsquo;apparition dans le code source HTML. Cela signifie que vous pouvez organiser les \u00e9l\u00e9ments visuellement sans avoir \u00e0 r\u00e9organiser le code HTML initial.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment Utiliser l&rsquo;attribut <code>order<\/code> en CSS<\/h3>\n\n\n\n<p>Pour utiliser l&rsquo;attribut <code>order<\/code>, il suffit de l&rsquo;appliquer \u00e0 un ou plusieurs \u00e9l\u00e9ments enfants d&rsquo;un conteneur Flexbox. Par d\u00e9faut, tous les \u00e9l\u00e9ments ont une valeur <code>order: 0<\/code>. En attribuant des valeurs positives ou n\u00e9gatives, vous contr\u00f4lez leurs positions. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n}\n\n.item-1 {\n  order: 2;\n}\n\n.item-2 {\n  order: 1;\n}\n\n.item-3 {\n  order: 3;\n}\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, bien que <code>.item-1<\/code> apparaisse en premier dans le code HTML, il sera affich\u00e9 en second dans le conteneur Flexbox gr\u00e2ce \u00e0 l&rsquo;attribut <code>order<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Pratiques pour Manipuler l&rsquo;Ordre des Items<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">R\u00e9organiser des Boxes Simples<\/h4>\n\n\n\n<p>Voyons un exemple plus concret o\u00f9 nous r\u00e9organisons trois bo\u00eetes. Voici le HTML et le CSS n\u00e9cessaires :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"item item-1\"&gt;Item 1&lt;\/div&gt;\n  &lt;div class=\"item item-2\"&gt;Item 2&lt;\/div&gt;\n  &lt;div class=\"item item-3\"&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>.container {\n  display: flex;\n}\n\n.item {\n  padding: 20px;\n  margin: 10px;\n  background-color: #f0f0f0;\n  border: 1px solid #ccc;\n}\n\n.item-1 {\n  order: 3;\n}\n\n.item-2 {\n  order: 1;\n}\n\n.item-3 {\n  order: 2;\n}\n<\/code><\/pre>\n\n\n\n<p>Avec ce CSS, <code>Item 2<\/code> appara\u00eetra en premier, suivi de <code>Item 3<\/code>, puis de <code>Item 1<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Cr\u00e9er une Navigation avec Flexbox<\/h4>\n\n\n\n<p>Un autre cas d&rsquo;utilisation pertinent est la cr\u00e9ation d&rsquo;une barre de navigation o\u00f9 certains \u00e9l\u00e9ments doivent \u00eatre r\u00e9organis\u00e9s selon les besoins. Voici comment :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;nav class=\"navbar\"&gt;\n  &lt;a href=\"#\" class=\"nav-item home\"&gt;Home&lt;\/a&gt;\n  &lt;a href=\"#\" class=\"nav-item about\"&gt;About&lt;\/a&gt;\n  &lt;a href=\"#\" class=\"nav-item contact\"&gt;Contact&lt;\/a&gt;\n  &lt;a href=\"#\" class=\"nav-item blog\"&gt;Blog&lt;\/a&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  background-color: #333;\n  padding: 10px;\n}\n\n.nav-item {\n  color: #fff;\n  padding: 10px;\n  text-decoration: none;\n}\n\n.home {\n  order: 1;\n}\n\n.about {\n  order: 2;\n}\n\n.contact {\n  order: 4;\n}\n\n.blog {\n  order: 3;\n}\n<\/code><\/pre>\n\n\n\n<p>Cette configuration de CSS positionne le lien \u00ab\u00a0Contact\u00a0\u00bb apr\u00e8s \u00ab\u00a0Blog\u00a0\u00bb, tout en gardant les autres \u00e9l\u00e9ments dans un ordre souhait\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser Flexbox avec des Frameworks CSS<\/h3>\n\n\n\n<p>Si vous utilisez des frameworks CSS populaires comme Bootstrap ou TailwindCSS, vous pouvez tirer parti des utilitaires int\u00e9gr\u00e9s pour contr\u00f4ler l&rsquo;ordre des \u00e9l\u00e9ments. Voici un exemple avec Bootstrap :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"d-flex\"&gt;\n  &lt;div class=\"order-3 p-2\"&gt;First flex item&lt;\/div&gt;\n  &lt;div class=\"order-1 p-2\"&gt;Second flex item&lt;\/div&gt;\n  &lt;div class=\"order-2 p-2\"&gt;Third flex item&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Bootstrap offre des classes utilitaires comme <code>order-1<\/code>, <code>order-2<\/code>, etc., pour faciliter le contr\u00f4le de l&rsquo;ordre des items.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemples Avanc\u00e9s d&rsquo;Utilisation de l&rsquo;Attribut <code>order<\/code><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">R\u00e9agencement Dynamique bas\u00e9 sur la R\u00e9activit\u00e9<\/h4>\n\n\n\n<p>Vous pouvez \u00e9galement utiliser des media queries pour r\u00e9organiser les items en fonction de la taille de l\u2019\u00e9cran. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n}\n\n.item {\n  padding: 20px;\n  margin: 10px;\n  background-color: #f0f0f0;\n  border: 1px solid #ccc;\n}\n\n\/* Ordre par d\u00e9faut *\/\n.item-1 {\n  order: 1;\n}\n\n.item-2 {\n  order: 2;\n}\n\n.item-3 {\n  order: 3;\n}\n\n\/* Ordre pour les \u00e9crans de moins de 600px *\/\n@media only screen and (max-width: 600px) {\n  .item-1 {\n    order: 3;\n  }\n\n  .item-2 {\n    order: 1;\n  }\n\n  .item-3 {\n    order: 2;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Ici, les \u00e9l\u00e9ments seront r\u00e9organis\u00e9s diff\u00e9remment sur les petits \u00e9crans pour une meilleure exp\u00e9rience utilisateur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Synchroniser l&rsquo;ordre avec JavaScript<\/h4>\n\n\n\n<p>Il est \u00e9galement possible de combiner Flexbox <code>order<\/code> avec JavaScript pour r\u00e9organiser dynamiquement les \u00e9l\u00e9ments. Voici un exemple simple utilisant JavaScript :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"item item-1\"&gt;Item 1&lt;\/div&gt;\n  &lt;div class=\"item item-2\"&gt;Item 2&lt;\/div&gt;\n  &lt;div class=\"item item-3\"&gt;Item 3&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;button onclick=\"reorderItems()\"&gt;R\u00e9organiser&lt;\/button&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>function reorderItems() {\n  const item1 = document.querySelector('.item-1');\n  const item2 = document.querySelector('.item-2');\n  const item3 = document.querySelector('.item-3');\n\n  item1.style.order = 2;\n  item2.style.order = 3;\n  item3.style.order = 1;\n}\n<\/code><\/pre>\n\n\n\n<p>En cliquant sur le bouton, l&rsquo;ordre des \u00e9l\u00e9ments sera r\u00e9organis\u00e9 conform\u00e9ment aux valeurs d\u00e9finies avec JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;attribut <strong><code>order<\/code> en Flexbox<\/strong> est un atout incontournable pour structurer visuellement vos \u00e9l\u00e9ments sans changer l\u2019ordre de votre code HTML. Que ce soit pour la cr\u00e9ation de barres de navigation, la r\u00e9organisation d\u2019\u00e9l\u00e9ments sur diff\u00e9rentes tailles d\u2019\u00e9cran, ou la synchronisation dynamique avec JavaScript, l&rsquo;attribut <code>order<\/code> offre une flexibilit\u00e9 consid\u00e9rable dans la mise en page.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/d%C3%A9veloppement-web-avanc%C3%A9-en-css\/142\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-avanc\u00e9-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Avanc\u00e9 Offre 50%\" title=\"\"><\/a>\n\n\n<!-- Internal Links integration -->\n\n<p>Pour une compr\u00e9hension approfondie du HTML et du CSS, consultez nos autres ressources\u00a0:\n    <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">fonctionnement-navigateur-web-html-guide<\/a>,\n    <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">bases-langage-html-apprendre-fondamentaux<\/a>,\n    <a href=\"https:\/\/wikiform.fr\/codespace\/syntaxe-css-bases-connaitre\">syntaxe-css-bases-connaitre<\/a>,\n    <a href=\"https:\/\/wikiform.fr\/codespace\/ajouter-commentaires-css-guide-pratique\">ajouter-commentaires-css-guide-pratique<\/a>, et\n    <a href=\"https:\/\/wikiform.fr\/codespace\/calcul-taille-element-css-box-sizing\">calcul-taille-element-css-box-sizing<\/a>.\n<\/p>\n\n\n<!-- External Links integration -->\n\n<p>Pour en savoir plus sur le Flexbox, vous pouvez \u00e9galement consulter le site de <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_F","protected":false},"excerpt":{"rendered":"<p>Ordre d&rsquo;Apparition des Flex-items en Flexbox : l&rsquo;attribut order est un outil puissant pour contr\u00f4ler l&rsquo;ordre d&rsquo;affichage des \u00e9l\u00e9ments dans un conteneur Flexbox. Apprendre \u00e0&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2751,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5417","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\/5417","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=5417"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5417\/revisions"}],"predecessor-version":[{"id":5418,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5417\/revisions\/5418"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2751"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}