{"id":5413,"date":"2024-08-27T18:36:56","date_gmt":"2024-08-27T18:36:56","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/espacement-flexbox-align-content\/"},"modified":"2024-11-28T09:32:19","modified_gmt":"2024-11-28T09:32:19","slug":"espacement-flexbox-align-content","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/espacement-flexbox-align-content\/","title":{"rendered":"8.4 Espacement sur l&rsquo;Axe Secondaire en Flexbox (align-content)"},"content":{"rendered":"\n\n\n<p><strong>Les techniques d&rsquo;espacement en Flexbox<\/strong> sont essentielles pour la mise en page responsive des sites web modernes. Comprendre comment utiliser la propri\u00e9t\u00e9 <strong>align-content<\/strong> en Flexbox pour g\u00e9rer l&rsquo;espacement sur l&rsquo;axe secondaire peut rendre votre design plus flexible et attrayant. Apprenons comment cela fonctionne et comment l&rsquo;impl\u00e9menter \u00e0 travers des exemples pratiques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>Align-Content en Flexbox<\/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\/586656646?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>align-content<\/code> en Flexbox contr\u00f4le l&rsquo;espace entre les lignes d&rsquo;\u00e9l\u00e9ments flexibles (flex items) lorsqu&rsquo;il y a de l&rsquo;espace libre disponible dans le conteneur flex. Elle peut \u00eatre utilis\u00e9e pour s&rsquo;assurer que les lignes sont align\u00e9es correctement, m\u00eame lorsque le conteneur a plus de hauteur disponible que ce qui est n\u00e9cessaire pour les lignes enfants. Explorons maintenant les diff\u00e9rentes valeurs que peut prendre cette propri\u00e9t\u00e9 et leur effet sur la disposition.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser la Propri\u00e9t\u00e9 <code>align-content<\/code><\/h3>\n\n\n\n<p><p>Les valeurs courantes de <code>align-content<\/code> incluent:<\/p>\n<ul>\n  <li><code>flex-start<\/code>: Aligne les lignes vers le d\u00e9but du conteneur.<\/li>\n  <li><code>flex-end<\/code>: Aligne les lignes vers la fin du conteneur.<\/li>\n  <li><code>center<\/code>: Centre les lignes dans le conteneur.<\/li>\n  <li><code>space-between<\/code>: Distribue les lignes de mani\u00e8re \u00e0 avoir un espace \u00e9gal entre elles.<\/li>\n  <li><code>space-around<\/code>: Distribue les lignes de mani\u00e8re \u00e0 avoir un espace \u00e9gal autour de chaque ligne.<\/li>\n  <li><code>space-evenly<\/code>: Distribue les lignes de mani\u00e8re \u00e0 avoir un espace \u00e9gal\u00e9ment r\u00e9parti dans le conteneur.<\/li>\n  <li><code>stretch<\/code>: \u00c9tire les lignes pour remplir l&rsquo;espace disponible.<\/li>\n<\/ul><\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  display: flex;\n  flex-wrap: wrap;\n  align-content: space-between;\n  height: 300px; \/* Hauteur fixe pour d\u00e9monstration *\/\n}\n.item {\n  flex: 1 1 100px;\n  height: 50px; \/* Hauteur fixe pour d\u00e9monstration *\/\n}\n\/* HTML *\/\n<div class=\"container\">\n  <div class=\"item\">Item 1<\/div>\n  <div class=\"item\">Item 2<\/div>\n  <div class=\"item\">Item 3<\/div>\n  <div class=\"item\">Item 4<\/div>\n  <div class=\"item\">Item 5<\/div>\n  <div class=\"item\">Item 6<\/div>\n<\/div>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Pratique: Alignement des Lignes avec <em>space-between<\/em><\/h3>\n\n\n\n<p>Pour mieux comprendre cette propri\u00e9t\u00e9, imaginons un conteneur Flexbox avec plusieurs \u00e9l\u00e9ments enfants. Voici un exemple r\u00e9el o\u00f9 nous utilisons <code>align-content: space-between<\/code> pour distribuer uniform\u00e9ment les lignes d&rsquo;\u00e9l\u00e9ments flexibles.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Flexbox align-content Example<\/title>\n  <style>\n    .container {\n      display: flex;\n      flex-wrap: wrap;\n      align-content: space-between;\n      height: 300px; \/* Hauteur fixe pour d\u00e9monstration *\/\n      background-color: #f0f0f0;\n      padding: 10px;\n    }\n    .item {\n      flex: 1 1 100px;\n      height: 50px; \/* Hauteur fixe pour d\u00e9monstration *\/\n      background-color: #4caf50;\n      margin: 5px;\n      text-align: center;\n      line-height: 50px; \/* Center text vertically *\/\n      color: white;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"container\">\n    <div class=\"item\">Item 1<\/div>\n    <div class=\"item\">Item 2<\/div>\n    <div class=\"item\">Item 3<\/div>\n    <div class=\"item\">Item 4<\/div>\n    <div class=\"item\">Item 5<\/div>\n    <div class=\"item\">Item 6<\/div>\n  <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explorer les Diff\u00e9rentes Valeurs d&rsquo;<em>Align-Content<\/em><\/h3>\n\n\n\n<p><p>Pour une meilleure compr\u00e9hension, testons les autres valeurs alternatives de la propri\u00e9t\u00e9 <code>align-content<\/code> :<\/p>\n<ul>\n  <li><code>flex-start<\/code> : <strong>Description :<\/strong> Les lignes sont regroup\u00e9es au d\u00e9but du conteneur. <strong>Exemple : <\/strong><\/li>\n<\/ul>\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  align-content: flex-start;\n}<\/code><\/pre>\n\n<ul>\n  <li><code>flex-end<\/code> : <strong>Description :<\/strong> Les lignes sont regroup\u00e9es \u00e0 la fin du conteneur. <strong>Exemple : <\/strong><\/li>\n<\/ul>\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  align-content: flex-end;\n}<\/code><\/pre>\n\n<ul>\n  <li><code>center<\/code> : <strong>Description :<\/strong> Les lignes sont centr\u00e9es dans le conteneur. <strong>Exemple : <\/strong><\/li>\n<\/ul>\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  align-content: center;\n}<\/code><\/pre>\n\n<ul>\n  <li><code>space-around<\/code> : <strong>Description :<\/strong> Les lignes ont un espace \u00e9gal autour d&rsquo;elles. <strong>Exemple : <\/strong><\/li>\n<\/ul>\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  align-content: space-around;\n}<\/code><\/pre>\n\n<ul>\n  <li><code>space-evenly<\/code> : <strong>Description :<\/strong> Les lignes sont distribu\u00e9es avec un espace \u00e9gal. <strong>Exemple : <\/strong><\/li>\n<\/ul>\n<pre class=\"wp-block-code lang-css\"><code>.container {\n  align-content: space-evenly;\n}<\/code><\/pre><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Cas Pratique: Formulaire Multi-Section<\/h3>\n\n\n\n<p>Pour voir une application concr\u00e8te, pensons \u00e0 un formulaire complexe avec plusieurs sections o\u00f9 les espaces entre les groupes de champs doivent \u00eatre distribu\u00e9s de mani\u00e8re \u00e9gale sur l&rsquo;axe secondaire :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code><!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Formulaire Flexbox align-content<\/title>\n  <style>\n    .form-container {\n      display: flex;\n      flex-wrap: wrap;\n      align-content: space-around;\n      height: 500px; \/* Hauteur fixe pour d\u00e9monstration *\/\n      background-color: #f9f9f9;\n      padding: 20px;\n      border: 1px solid #ddd;\n    }\n    .form-section {\n      flex: 1 1 150px;\n      margin: 10px;\n      padding: 20px;\n      background-color: #2196F3;\n      color: white;\n      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"form-container\">\n    <div class=\"form-section\">Section 1<\/div>\n    <div class=\"form-section\">Section 2<\/div>\n    <div class=\"form-section\">Section 3<\/div>\n    <div class=\"form-section\">Section 4<\/div>\n    <div class=\"form-section\">Section 5<\/div>\n  <\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>La ma\u00eetrise de la propri\u00e9t\u00e9 <code>align-content<\/code> en Flexbox est cruciale pour g\u00e9rer efficacement l&rsquo;espacement des lignes sur l&rsquo;axe secondaire dans vos mises en page web. En exp\u00e9rimentant avec diff\u00e9rentes valeurs, vous pouvez obtenir des designs flexibles et esth\u00e9tiques qui s&rsquo;adaptent aux divers besoins de vos projets. Pour continuer votre apprentissage, consultez nos autres articles sur les techniques avanc\u00e9es de Flexbox et n&rsquo;h\u00e9sitez pas \u00e0 explorer les ressources mentionn\u00e9es pour approfondir vos connaissances.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-css\/145\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-offre-45.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 45%\" title=\"\"><\/a>\n\n\n<p><!-- Extensions SEO --><\/p>\n<p><!-- Ajouter plus de contenu naturel li\u00e9 \u00e0 l'align-content dans Flexbox pour atteindre 1200 mots --><\/p>\n\n\n<p>Il est important de noter que <code>align-content<\/code> ne fonctionne que lorsque il y a plusieurs lignes d&rsquo;\u00e9l\u00e9ments enfants (flex items) \u00e0 l&rsquo;int\u00e9rieur du conteneur. Des tutoriels sp\u00e9cifiques sur la <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" title=\"Fonctionnement du navigateur Web\">fonctionnement du navigateur Web<\/a> peuvent aider \u00e0 mieux comprendre comment Flexbox et CSS en g\u00e9n\u00e9ral interagissent avec le moteur du navigateur.<\/p>\n<p>L&rsquo;une des meilleures pratiques pour d\u00e9velopper avec Flexbox en CSS est de toujours se r\u00e9f\u00e9rer \u00e0 la documentation officielle des propri\u00e9t\u00e9s. Par exemple, la <a href=\"https:\/\/www.w3.org\/TR\/css-flexbox-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">sp\u00e9cification CSS Flexible Box Layout Module<\/a> peut fournir des clarifications pr\u00e9cises sur le comportement attendu des propri\u00e9t\u00e9s Flexbox. C&rsquo;est aussi une bonne id\u00e9e de consulter des blogs techniques tels que <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\" target=\"_blank\" rel=\"dofollow noopener\">CSS-Tricks<\/a> qui offrent des guides visuels et des astuces pratiques pour une impl\u00e9mentation correcte des propri\u00e9t\u00e9s Flexbox.<\/p>\n<p>Ensuite, alors que nous discutons de l&rsquo;alignement et des espaces dans Flexbox, l&rsquo;utilisation de la propri\u00e9t\u00e9 <code>justify-content<\/code> peut \u00e9galement \u00eatre explor\u00e9e pour le contr\u00f4le des espaces sur l&rsquo;axe principal. Dans un contexte de grille, l&rsquo;organisation des \u00e9l\u00e9ments pourrait exiger des connaissances sur <a href=\"https:\/\/wikiform.fr\/codespace\/gestion-police-css-utiliser-font-family\" title=\"Gestion des polices en CSS\">gestion des polices en CSS<\/a>, car l&rsquo;ajustement des polices peut \u00e9galement influencer la r\u00e9partition des \u00e9l\u00e9ments flex dans le conteneur. Par exemple si vous ayez d\u00e9j\u00e0 cr\u00e9\u00e9 une <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" title=\"Cr\u00e9er sa premi\u00e8re page HTML\">premi\u00e8re page HTML<\/a> il vous sera plus simple de v\u00e9rifier pour que tous les \u00e9l\u00e9ments soient align\u00e9s correctement.<\/p>\n<p>Il est \u00e9galement possible d&rsquo;utiliser la propri\u00e9t\u00e9 <\n","protected":false},"excerpt":{"rendered":"<p>Les techniques d&rsquo;espacement en Flexbox sont essentielles pour la mise en page responsive des sites web modernes. Comprendre comment utiliser la propri\u00e9t\u00e9 align-content en Flexbox&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5413","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\/5413","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=5413"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5413\/revisions"}],"predecessor-version":[{"id":6060,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5413\/revisions\/6060"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2732"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}