{"id":5411,"date":"2024-08-27T18:33:03","date_gmt":"2024-08-27T18:33:03","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/retour-ligne-flex-items-flexbox-flex-wrap\/"},"modified":"2024-11-15T15:56:49","modified_gmt":"2024-11-15T15:56:49","slug":"retour-ligne-flex-items-flexbox-flex-wrap","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/retour-ligne-flex-items-flexbox-flex-wrap\/","title":{"rendered":"8.3 Retour \u00e0 la Ligne des Flex-items en Flexbox (flex-wrap)"},"content":{"rendered":"\n\n\n<p><strong>Retour \u00e0 la ligne des flex-items en Flexbox (flex-wrap)<\/strong> est une propri\u00e9t\u00e9 essentielle pour ma\u00eetriser la disposition des \u00e9l\u00e9ments dans une interface web. Comprendre comment utiliser la propri\u00e9t\u00e9 <strong>flex-wrap<\/strong> permet de cr\u00e9er des mises en page flexibles et r\u00e9actives. Dans cet article, nous explorerons comment le faire avec des exemples concrets de code HTML et CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>flex-wrap<\/strong> 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\/586656618?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>Le mod\u00e8le Flexbox en CSS est con\u00e7u pour cr\u00e9er des agencements flexibles et efficaces. La propri\u00e9t\u00e9 <code>flex-wrap<\/code> sp\u00e9cifie si les \u00e9l\u00e9ments flexibles doivent rester sur une seule ligne ou \u00eatre r\u00e9partis sur plusieurs lignes. Elle est particuli\u00e8rement utile lorsque vous travaillez avec des \u00e9l\u00e9ments de diff\u00e9rentes tailles ou que vous essayez d&rsquo;adapter votre mise en page \u00e0 diff\u00e9rentes tailles d&rsquo;\u00e9cran.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les Valeurs de <code>flex-wrap<\/code><\/h3>\n\n\n\n<p><p>Il existe trois valeurs principales pour la propri\u00e9t\u00e9 <code>flex-wrap<\/code>:<\/p>\n<ul>\n  <li><strong>nowrap<\/strong>: Les \u00e9l\u00e9ments restent sur une seule ligne et peuvent d\u00e9border de leur conteneur.<\/li>\n  <li><strong>wrap<\/strong>: Les \u00e9l\u00e9ments passent \u00e0 la ligne suivante si n\u00e9cessaire.<\/li>\n  <li><strong>wrap-reverse<\/strong>: Comme <code>wrap<\/code>, mais les lignes sont affich\u00e9es en ordre inverse.<\/li>\n<\/ul>\n<p>Voici comment appliquer chacune de ces valeurs :<\/p><\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  flex-wrap: nowrap; \/* ou wrap, wrap-reverse *\/\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple de Flexbox avec <code>flex-wrap<\/code><\/h3>\n\n\n\n<p>Afin de mieux comprendre la propri\u00e9t\u00e9 <code>flex-wrap<\/code>, appliquons-la \u00e0 un exemple pratique. Nous allons cr\u00e9er un conteneur flex qui contient plusieurs \u00e9l\u00e9ments flexibles.<\/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 class=\"item\"&gt;Item 4&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;Item 5&lt;\/div&gt;\n  &lt;div class=\"item\"&gt;Item 6&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Ensuite, nous allons ajouter du CSS pour observer le comportement des \u00e9l\u00e9ments avec diff\u00e9rentes valeurs de <code>flex-wrap<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.item {\n  background-color: #4CAF50;\n  color: white;\n  border: 1px solid #000;\n  padding: 10px;\n  margin: 5px;\n  width: 150px;\n  text-align: center;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Breakpoints pour une Mise en Page R\u00e9active<\/h3>\n\n\n\n<p>Pour rendre notre mise en page encore plus r\u00e9active, nous pouvons utiliser des breakpoints avec des media queries. Cela nous permettra d&rsquo;ajuster la valeur de <code>flex-wrap<\/code> en fonction de la taille de l&rsquo;\u00e9cran.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>@media (max-width: 600px) {\n  .container {\n    flex-wrap: wrap-reverse;\n  }\n}\n\n@media (min-width: 601px) {\n  .container {\n    flex-wrap: wrap;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser <code>justify-content<\/code> avec <code>flex-wrap<\/code><\/h3>\n\n\n\n<p>Pour mieux contr\u00f4ler l&rsquo;agencement des \u00e9l\u00e9ments flexibles qui reviennent \u00e0 une nouvelle ligne, nous pouvons utiliser la propri\u00e9t\u00e9 <code>justify-content<\/code> avec <code>flex-wrap<\/code>. Par exemple, nous pouvons centrer les \u00e9l\u00e9ments sur chaque ligne.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n<\/code><\/pre>\n\n\n\n<p>Avec ce code, m\u00eame si les \u00e9l\u00e9ments passent \u00e0 une nouvelle ligne, ils seront centr\u00e9s par rapport \u00e0 la ligne suivante.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner <code>flex-wrap<\/code> avec d&rsquo;Autres Propri\u00e9t\u00e9s Flexbox<\/h3>\n\n\n\n<p>Pour tirer le meilleur parti de Flexbox, il est utile de combiner <code>flex-wrap<\/code> avec d&rsquo;autres propri\u00e9t\u00e9s comme <code>align-items<\/code> et <code>align-content<\/code>. Cela permet de contr\u00f4ler l&rsquo;alignement des lignes de flex-items par rapport \u00e0 l&rsquo;axe secondaire de leur conteneur flex.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  align-content: space-between;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Utiliser la propri\u00e9t\u00e9 <strong>flex-wrap<\/strong> en Flexbox est essentiel pour cr\u00e9er des interfaces flexibles et r\u00e9actives. Cette propri\u00e9t\u00e9 permet aux \u00e9l\u00e9ments de revenir \u00e0 la ligne lorsque n\u00e9cessaire, assurant ainsi une meilleure pr\u00e9sentation sur diff\u00e9rents \u00e9crans et appareils. En ma\u00eetrisant <code>flex-wrap<\/code> et ses valeurs, ainsi qu&rsquo;en les combinant avec d&rsquo;autres propri\u00e9t\u00e9s Flexbox, vous pouvez concevoir des mises en page sophistiqu\u00e9es et dynamiques.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/mastering-flexbox\/150\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/flexbox-tutorial.jpg\" loading=\"lazy\" alt=\"Mastering Flexbox - Tutorial\" title=\"\"><\/a>\n\n\n<p><!-- Additional Content for SEO and Informative Purposes --><\/p>\n<p><!-- Add more informative sections here --><\/p>\n\n\n<h2 class=\"wp-block-heading\">Comment Flexbox et ses Propri\u00e9t\u00e9s Modernisent le Web<\/h2>\n\n\n\n<p>En plus de <code>flex-wrap<\/code>, la modernisation des pages web gr\u00e2ce \u00e0 Flexbox repose sur l&rsquo;utilisation harmonieuse de toutes les propri\u00e9t\u00e9s de Flexbox. Cela inclut des propri\u00e9t\u00e9s cl\u00e9s comme <a href=\"https:\/\/wikiform.fr\/codespace\/justification-espacement-flexbox-justify-content\" target=\"_blank\" rel=\"noopener\">justify-content<\/a> et <a href=\"https:\/\/wikiform.fr\/codespace\/espacement-alignement-flexbox-align-content\" target=\"_blank\" rel=\"noopener\">align-content<\/a>. La ma\u00eetrise de ces outils permet de cr\u00e9er des designs qui s&rsquo;adaptent sans effort \u00e0 n&rsquo;importe quelle r\u00e9solution d&rsquo;\u00e9cran, qu&rsquo;il s&rsquo;agisse de <a href=\"https:\/\/wikiform.fr\/codespace\/responsive-design-medias-queries-css\" target=\"_blank\" rel=\"noopener\">designs r\u00e9actifs<\/a> ou de mises en page complexes pour les grandes r\u00e9solutions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Applications R\u00e9elles de Flexbox<\/h2>\n\n\n\n<p>Flexbox trouve ses applications dans diverses configurations de mise en page : des grilles complexes aux simples lignes d&rsquo;\u00e9l\u00e9ments align\u00e9s horizontalement. Par exemple, cr\u00e9er une <a href=\"https:\/\/wikiform.fr\/codespace\/generer-disposition-contenu-flexbox-tutoriel\" target=\"_blank\" rel=\"noopener\">disposition de contenu structur\u00e9e<\/a> devient une t\u00e2che ais\u00e9e avec Flexbox. En utilisant des classes CSS sp\u00e9cifiques et des breakpoints adapt\u00e9s, vous pouvez <a href=\"https:\/\/wikiform.fr\/codespace\/adapter-mise-en-page-flexbox-css\" target=\"_blank\" rel=\"noopener\">adapter rapidement votre mise en page<\/a> pour diff\u00e9rentes tailles d&rsquo;\u00e9cran.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Utiliser Flexbox en Conjonction avec d&rsquo;autres Techniques CSS<\/h2>\n\n\n\n<p>Il est \u00e9galement pertinent de noter que Flexbox peut \u00eatre efficacement combin\u00e9 avec d&rsquo;autres techniques CSS telles que les <a href=\"https:\/\/wikiform.fr\/codespace\/methodologie-css-grid-mise-en-page\" target=\"_blank\" rel=\"noopener\">grilles CSS<\/a> et les <a href=\"https:\/\/wikiform.fr\/codespace\/medias-queries-css-mise-en-page-responsive\" target=\"_blank\" rel=\"noopener\">media queries<\/a>. Cette combinaison permet de <a href=\"https:\/\/wikiform.fr\/codespace\/optimiser-contenu-web-flexbox\" target=\"_blank\" rel=\"noopener\">dynamiser et optimiser<\/a> le contenu visuel des sites web de mani\u00e8re innovante et efficace.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Les Avantages de l&rsquo;Utilisation de Flexbox pour les D\u00e9veloppeurs<\/h2>\n\n\n\n<p>Pour les d\u00e9veloppeurs web, comprendre et ma\u00eetriser Flexbox est crucial. Cela leur offre la possibilit\u00e9 de cr\u00e9er des interfaces interactives et attrayantes tout en r\u00e9duisant le temps de d\u00e9veloppement. Int\u00e9grer des <a href=\"https:\/\/wikiform.fr\/codespace\/animations-flexbox-css-techniques\" target=\"_blank\" rel=\"noopener\">animations CSS<\/a> simples peut \u00e9galement enrichir l&rsquo;exp\u00e9rience utilisateur et faire ressortir <a href=\"https:\/\/wikiform.fr\/codespace\/presentation-contenu-web-flexbox\" target=\"_blank\" rel=\"noopener\">les pr\u00e9sentations de contenu<\/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","protected":false},"excerpt":{"rendered":"<p>Retour \u00e0 la ligne des flex-items en Flexbox (flex-wrap) est une propri\u00e9t\u00e9 essentielle pour ma\u00eetriser la disposition des \u00e9l\u00e9ments dans une interface web. Comprendre comment&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2771,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5411","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\/5411","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=5411"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5411\/revisions"}],"predecessor-version":[{"id":6053,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5411\/revisions\/6053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2771"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}