Exercice pratique Flexbox avec Tailwind CSS

La mise en page web complexe peut être un défi sans les bons outils.

Sans Flexbox ou Grid, organiser des éléments de manière efficace peut rapidement devenir fastidieux.

Cet article vous guide à travers un exercice pratique avec Tailwind CSS pour renforcer vos compétences en Flexbox.

Table de matière

Exercice Flexbox avec Tailwind CSS Bases de Flexbox avec Tailwind CSS Combiner Grid CSS et Flexbox Créer un design Flexbox responsive FAQ Conclusion

Formation Maîtriser Tailwind CSS : Le guide complet

Maîtrisez Tailwind CSS : De l'installation à l'optimisation avancée

Nous vous proposons maintenant un nouvel exercice pour consolider vos compétences en CSS Flexbox avec Tailwind CSS . Préparez-vous à relever ce défi pratique qui vous permettra de mettre en œuvre tout ce que vous avez appris. Passons ensemble à la découverte de cet exercice et à l’application concrète de vos connaissances dès maintenant !

Exercice Flexbox avec Tailwind CSS

L’exercice que nous allons réaliser maintenant ressemble beaucoup à ce qu’on a vu avec Grid CSS sauf qu’on va plutôt l’appliquer avec Flexbox :

Voici un petit défi : essayez de créer cette mise en page avant de consulter la correction, en suivant ces instructions :

Commencez par structurer la page avec les éléments header , main , et footer .
Utilisez Flexbox pour organiser les éléments à l’intérieur de la balise main pour la version desktop.
N’oubliez pas d’utiliser Grid pour gérer la hauteur des sections.
Enfin, adaptez l’ensemble de la mise en page pour la version mobile.

Bases de Flexbox avec Tailwind CSS

Pour commencer l’exercice, voici le code de départ que vous utiliserez. Il est structuré de la manière suivante :

Pour réaliser cela, vous pouvez :

Regarder le code ci-après :

				
					
 <body>
<header class="bg-[#2C3E50] text-center uppercase text-white text-xl">header</header>
<main>
<nav class="bg-[#16A085] text-center uppercase text-white text-xl">nav</nav>
<section class="bg-[#D9D9D9] text-center uppercase text-white text-xl">section</section>
<aside class="bg-[#2ECC71] text-center uppercase text-white text-xl">aside</aside>
</main>
<footer class="bg-[#2980B9] text-center uppercase text-white text-xl">footer</footer>
<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"ec0bb1c92f","url":"https:\/\/blog.alphorm.com\/exercice-flexbox-tailwind-css-pratique","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>

Ou bien voir le CodePen correspondant à la base de cet exercice :

CodePen : Découvrez le code pour commencer l’exercice sur Flexbox dans ce lien CodePen.

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Déjà, nous allons partir de cette base pour faire, cette fois-ci, la version desktop en premier lieu, votre mission sera donc de réaliser les modifications suivantes :

Dans la balise main , créez un conteneur flex pour organiser les éléments.
Utilisez la classe basis-1/4 pour définir la largeur du nav et de l’ aside , qui occuperont chacun un quart de l’espace.
Pour la section principale article , appliquez basis-1/2 , afin qu’elle occupe la moitié de la largeur totale, au centre de la page.
Assurez-vous que l’agencement soit équilibré avec ces proportions, en répartissant correctement l’espace entre les trois sections.

Vous devrez obtenir quelque chose qui ressemble à ceci :

Combiner Grid CSS et Flexbox

La prochaine étape, c’est de définir la hauteur de nos balises, on n’a pas vu comment faire cela avec Flexbox donc on retourne pour demander un peu d’aide à notre ami CSS Grid.

Si vous avez bien suivi l’exercice précédent, voici les étapes que vous devrez suivre :

Déclarer la balise body en tant que conteneur Grid , ce qui vous permettra de structurer facilement les différentes sections de la page.
Ensuite, utilisez la classegrid-rows-[100px_auto_100px]pour définir la hauteur des trois parties principales :header,main, etfooter. Cela vous permettra de donner une hauteur fixe auxheaderetfootertout en laissant la partie centrale (main) occuper l’espace restant.
N’oubliez pas d’appliquer h-screen sur le body afin qu’il prenne toute la hauteur de l’écran.

Cette méthode vous permettra d’obtenir un bon résultat.

Créer un design Flexbox responsive

La dernière étape de l’exercice consiste à adapter la mise en page pour la version mobile.

Pour y parvenir, vous devrez effectuer les modifications suivantes dans la balise main :

Activez le mode flex uniquement pour les écrans larges ( lg et au-delà) afin que les éléments soient disposés horizontalement sur ces écrans.
Réorganisez l’ordre d’affichage des éléments en définissant un ordre spécifique pour les grands écrans et un ordre par défaut pour les petits écrans (version mobile) en jouant avec la classe order .
Utilisez Grid pour définir la hauteur des éléments dans la version mobile avec la classe grid-rows-[auto_100px_100px] . Les deux dernières hauteurs (100px chacune) seront attribuées aux balises nav et aside , assurant ainsi une présentation cohérente et fonctionnelle sur les petits écrans.

En appliquant ces ajustements, la mise en page s’adaptera parfaitement aux écrans mobiles tout en restant optimisée pour les écrans plus grands.

Nous arrivons ainsi à la fin de cet exercice. Pour celles et ceux qui ont rencontré des difficultés, pas de souci. Je mets à votre disposition la correction complète dans le code et le lien vers le CodePen suivant :

Code :

				
					
 <body class="grid grid-rows-[100px_auto_100px] h-screen">
<header class="bg-[#2C3E50] text-center uppercase text-white text-xl">header</header>
<main class="lg:flex grid grid-rows-[auto_100px_100px]">
<nav class="bg-[#16A085] text-center uppercase text-white text-xl basis-1/4 lg:order-1 order-2">nav</nav>
<section class="bg-[#D9D9D9] text-center uppercase text-white text-xl basis-1/2 lg:order-2 order-1">section</section>
<aside class="bg-[#2ECC71] text-center uppercase text-white text-xl basis-1/4 order-3">aside</aside>
</main>
<footer class="bg-[#2980B9] text-center uppercase text-white text-xl">footer</footer>

<script src="https://cdn.tailwindcss.com" data-rocket-defer defer></script>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"ec0bb1c92f","url":"https:\/\/blog.alphorm.com\/exercice-flexbox-tailwind-css-pratique","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>

CodePen :

CodePen : Cliquer sur la figure suivante pour voir le résultat de l’exercice 4

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment utiliser Flexbox avec Tailwind CSS ?

Pour utiliser Flexbox avec Tailwind CSS, commencez par structurer votre page avec des conteneurs flexibles. Utilisez les classes utilitaires de Tailwind comme ‘flex’, ‘basis-1/4’, et ‘basis-1/2’ pour gérer la disposition des éléments. Cela permet d’organiser le contenu de manière adaptable, notamment en définissant les proportions des éléments enfants dans le conteneur principal.

Comment combiner Flexbox et Grid CSS pour la mise en page ?

La combinaison de Flexbox et Grid CSS permet une mise en page robuste. Utilisez Grid CSS pour structurer la hauteur globale des sections avec des classes comme ‘grid-rows-[100px_auto_100px]’. Flexbox est idéal pour organiser les éléments à l’intérieur de ces sections, offrant flexibilité et adaptabilité aux différents écrans.

Comment rendre un design Flexbox responsive ?

Pour rendre un design Flexbox responsive, appliquez Flexbox pour les grands écrans et Grid pour les petits. Utilisez les points de rupture de Tailwind CSS, par exemple ‘lg:flex’, pour activer le mode flex uniquement sur les écrans larges. Ajustez l’ordre des éléments avec ‘order’ pour adapter l’affichage selon la taille de l’écran.

Quels sont les avantages de Flexbox par rapport à Grid ?

Flexbox est particulièrement avantageux pour la disposition des éléments en une seule dimension, qu’elle soit horizontale ou verticale. Il est excellent pour distribuer l’espace entre les éléments et aligner le contenu. Grid CSS est plus adapté pour des mises en page complexes à deux dimensions, offrant un contrôle précis sur la disposition des lignes et colonnes.

Quel est le rôle de Tailwind CSS dans l'utilisation de Flexbox ?

Tailwind CSS facilite l’utilisation de Flexbox grâce à ses classes utilitaires prédéfinies. Ces classes simplifient le processus de mise en page en fournissant des options flexibles pour gérer la disposition, l’alignement et la distribution de l’espace des éléments. Tailwind permet une personnalisation rapide et efficace des styles.

Conclusion

En explorant cet exercice, vous avez découvert les multiples facettes de Flexbox avec Tailwind CSS. Comment allez-vous appliquer ces techniques dans vos projets futurs ?