Mise en page avec la FlexBox de Bootstrap4

La FlexBox (Flexible Box qui veut dire en français conteneur flexible) tout comme  la grille est un puissant outil simple à utiliser qui est intégré à la version 4 de la bibliothèque Bootstrap pour réaliser une mise en page soigneuse et rapide qui s’accommode au différentes tailles d’écrans.

Qu’est-ce que la Flexbox, sur quel concept de base  fonctionne-t-il?

La Flexbox est un module CSS qui permet d’agencer naturellement des éléments enfants flexibles dans une boite parent flexible avec la possibilité de modifier la direction des éléments enfants et aussi d’aligner ces éléments enfants selon une disposition voulue.

Bootstrap4 dans le soucis d’aider les développeurs web à implémenter des Flexbox dans leur application web en évitant d’écrire plusieurs lignes de codes CSS, elle a défini des classes CSS qu’il faut appeler dans le fichier HTML pour avoir le résultat voulu.

Maintenant passons à la pratique de  l’utilisation des Flexbox de Bootstrap4.

Possibilité de créer une grille qui s’ajuste automatiquement sans préciser la largeur des colonnes (Les auto-layouts)

La version 4 de Bootstrap a vu son système de grille être entièrement reconstruit avec la Flexbox, ce qui donne la possibilité de réaliser une grille dont les colonnes s’ajustent automatiquement même si les dimensions des colonnes ne sont pas spécifiées.

Premier Exemple : Réalisons une grille d’une ligne contenant 4 colonnes de même largeur

<div class="container"> 
      <div class="row"> 
           <div class="col"> 
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim     veniam,
                       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                       consequat.
                    </p>
		</div>
		<div class="col">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                       consequat.
                    </p>
		</div>
		<div class="col">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                       consequat.
                    </p>
		</div>
		<div class="col">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                       consequat.
                    </p>
		</div>
	</div>
</div>

 

Résultats :

auto-layout

Deuxième exemple : Nous allons réaliser une grille d’une ligne contenant 5 colonnes, la colonne du milieu à elle seule aura une largeur de 6 sur les 12 du conteneur et les autres colonnes vont se partager la largeur restante.

<div class="container">
    	<div class="row">
    		<div class="col">
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat.
                        </p>
    		</div>
    		<div class="col">
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat.
                        </p>
    		</div>
    		<div class="col-6">
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat.
                        </p>
    		</div>

    		<div class="col">
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat.
                        </p>
    		</div>
    		<div class="col">
    			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                           consequat.
                        </p>
    		</div>
    	</div>
    </div>

 

Résultat :

un auto-layout

NB : Reprenez ces exemples, seul la pratique vous permettra de bien maitriser l’utilisation de Bootstrap4.

Définissez le comportement de votre Flexbox avant d’imbriquer les éléments enfants

Tout comme la grille de Bootstrap, pour utiliser la Flexbox de Bootstrap il faut tout d’abord créer un conteneur parent dans lequel tous les éléments seront imbriqués. Mais avec la Flexbox vous pouvez créer un conteneur parent qui soit occupe toute l’espace du support sur lequel il s’affiche ou soit qui  s’adapte à son contenu.

Définir un conteneur flexible qui occupe toute l’espace du support d’affichage :

Pour pouvoir réaliser cela, Bootstrap4 met à votre disposition la classe : .d-flex

Définir un conteneur flexible qui s’adapte à son contenu :

La classe .d-inline-flex est celle qui vous permet de créer une Flexbox qui s’adapte à son contenu.

Pour les exemples qui vont suivre, nous allons définir une couleur de fond pour les Flexbox grâce à la classe .bg-danger que nous verrons dans le cours les couleurs proposées par Bootstrap4. Nous définissons la couleur de fond pour pouvoir bien observer les différents comportements des Flexbox.

Exemple 1: Réalisons une Flexbox qui occupe toute l’espace du support d’affichage.

<div class="d-flex bg-danger p-5">
    	<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

 

Rendu :

flexbox

Exemple 2 : Réalisons une Flexbox qui s’adapte à son contenu

<div class="d-inline-flex bg-danger p-5">
    	<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Rendu :

flexbox

Définir la direction des éléments enfants d’une flexbox :

Quand vous créez un conteneur flexible, par défaut ses éléments enfants s’alignent horizontalement en partant de la gauche de la flexbox vers la droite, mais vous avez le choix de garder cette disposition des éléments ou de définir une autre des dispositions prévues par Bootstrap4.

Bootstrap vous offre la possibilité de disposer les éléments enfants de la flexbox horizontalement ou verticalement selon l’ordre qui vous convient.

Disposition horizontal des éléments enfants de la flexbox :

Pour disposer les éléments enfants horizontalement il faut spécifier si les éléments se disposeront en partant de la gauche vers la droite en utilisant la classe .flex-row ou de la droite vers la gauche en utilisant la classe .flex-row-reverse.

Pour les exemples que nous allons réaliser, nous utiliserons encore les couleurs de Bootstrap pour définir la couleur de fond des différents éléments. Ainsi nous observerons la nuance entre les différents résultats. Mais nous verrons en détails plus loin les différentes couleurs proposées par Bootstrap.

Exemple :   Disposition horizontale des éléments enfants en partant de la gauche vers la droite

Définir la direction des éléments enfants d’une flexbox :

Quand vous créez un conteneur flexible, par défaut ses éléments enfants s’alignent horizontalement en partant de la gauche de la flexbox vers la droite, mais vous avez le choix de garder cette disposition des éléments ou de définir une autre des dispositions prévues par Bootstrap4.

Bootstrap vous offre la possibilité de disposer les éléments enfants de la flexbox horizontalement ou verticalement selon l’ordre qui vous convient.

Disposition horizontal des éléments enfants de la flexbox :

Pour disposer les éléments enfants horizontalement il faut spécifier si les éléments se disposeront en partant de la gauche vers la droite en utilisant la classe .flex-row ou de la droite vers la gauche en utilisant la classe .flex-row-reverse.

Pour les exemples que nous allons réaliser, nous utiliserons encore les couleurs de Bootstrap pour définir la couleur de fond des différents éléments. Ainsi nous observerons la nuance entre les différents résultats. Mais nous verrons en détails plus loin les différentes couleurs proposées par Bootstrap.

Exemple :   Disposition horizontale des éléments enfants en partant de la gauche vers la droite

<div class="d-flex flex-row">
          <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
</div>

Rendu :

alignement d'une flexbox

Exemple :   Disposition horizontale des éléments enfants en partant de la droite vers la gauche

<div class="d-flex flex-row-reverse">
          <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg- success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg- info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
</div>

Rendu :

alignement d'une flexbox

Disposition verticale des éléments enfants de la flexbox :

Pour disposer les éléments enfants verticalement il faut spécifier si les éléments se disposeront du haut vers le bas en utilisant la classe .flex-column ou du bas vers le haut en utilisant la classe .flex- column -reverse.

Exemple :   Disposition verticale des éléments enfants en partant du haut vers le bas.

<div class="d-flex flex-column">
          <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg- success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg- info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
</div>

Rendu :

alignement vertical d'une flexbox

Exemple :   Disposition verticale des éléments enfants en partant du bas vers le haut.

<div class="d-flex flex-column-reverse">
          <div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg- success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg- info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
</div> 

Rendu :

alignement vertical d'une flexbox

Définissez l’ordre des éléments enfants de la Flexbox

Vous avez la possibilité de changer l’ordre visuel des éléments flexibles du Flexbox, mais avant de pouvoir changer l’ordre il faut que vous comprenez sur quel concept de base fonctionne le changement d’ordre des éléments flexibles d’une flexbox.

Le système d’ordonnément de la flexbox vous permet de positionner un élément enfant du flexbox quel qu’en soit sa position initiale dans la hiérarchie au tout début grâce à la classe .order-first ou à la fin à l’aide de la classe .order-last.

A part la possibilité de disposer un élément soit au début ou à la fin de la flexbox, le système d’ordonnément permet aussi d’ordonner un élément sur une plage de 12 places à l’aide de la classe .order-x . X est la valeur de la position que vous voudriez que l’élément occupe, cette valeur doit être comprise entre 0 et 12.

Puisque la pratique apporte toujours plus d’éclaircissement que la théorie, nous allons réaliser 2 exemples qui vous aideront à mieux comprendre le système d’ordonnément.

Premier Exemple : Nous allons reprendre l’exemple d’une Flexbox contenant des éléments disposés horizontalement dans l’ordre normal. Mais cette fois ci avec la classe .order-last nous allons positionner le premier élément à la fin et avec la classe .order-first nous allons positionner le dernier élément au début.

Rendu du Flexbox sans ordonner les éléments :

flexbox

<div class="d-flex">
          <div class="bg-danger order-last">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg-info order-first">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
</div>

Rendu graphique du code source :

ordonner les éléments d'une flexbox

Second Exemple : Dans cet exemple nous allons positionner le contenu2 au début, le contenu3 au milieu et le contenu1 sera à la fin

<div class="d-flex">
          <div class="bg-danger order-3">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg-success order-1 ">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
          <div class="bg-info order-2">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </div>
</div>

Rendu graphique :

ordonnement les elements d'une flexbox

Retour à la ligne des éléments enfants d’une flexbox

Quel qu’en soit le nombre des éléments que vous imbriquez dans une flexbox, par défaut ces éléments restent tous sur la même ligne. Dans certains cas ça serait judicieux que d’autres éléments passent à la ligne pour que votre design soit propre et présentable.

Pour spécifier à votre flexbox que certains éléments passent à la ligne suivante lorsqu’il a plus de place il faut utiliser la classe .flex-wrap, mais si vous voulez que les éléments restent tous sur la même ligne vous avez le choix entre ne rien spécifier à la flexbox ou lui attribuer la classe .flex-nowrap.

Voici des exemples des rendus graphiques de l’utilisation des classes .flex-wrap et .flex-nowrap :

Exemple : utilisation de .flex-wrap

<div class="d-flex bg-dark flex-wrap">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-primary">
                 <h2>Contenu4</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Rendu graphique :

retour à la ligne des éléments d'une flexbox

Exemple : Utilisation de .flex-nowrap

<div class="d-flex bg-dark flex-nowrap">      	
    	<div class="bg-danger">
                 <h2>Contenu1</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-success">
                 <h2>Contenu2</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-info">
                 <h2>Contenu3</h2>
                 <p>Excepteur sint </p>
          </div>
          <div class="bg-primary">
                 <h2>Contenu4</h2>
                 <p>Excepteur sint </p>
          </div>
</div>

Rendu graphique :

disposition des éléments d'une flexbox sur la même ligne

Voir la table des matières

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.