fbpx
contact@bootstrap-top-design.com

Voici comment vous pouvez à l’aide des classes flexbox de Bootstrap, réaliser une propre mise en page (Partie 2)

Agencer des éléments à l'aide des classes flexbox de Bootstrap

Lorsque vous terminerez la lecture de ce tutoriel qui est le deuxième et le dernier sur les classes flexbox de Bootstrap, vous :

  • Comprendrez le mécanisme sur lequel se base la flexbox pour aligner les éléments imbriqués dans un conteneur flexible
  • Ensuite, vous connaitrez les différentes possibilités d’alignement de ses éléments et le plus important, vous maitriserez ces différents alignements.

Comme le stipule le premier paragraphe, ce tutoriel est la suite du tutoriel sur les classes flexbox de Bootstrap, dans le premier cours nous avons étudié :

  • Comment définir un conteneur flexible qui s’adapte à son contenu ou qui occupe toute la largeur de l’écran d’affichage.
  • Comment positionner les éléments imbriqués dans un conteneur flexible verticalement et horizontalement.

Vous pouvez relire la première partie de ce tutoriel en cliquant sur ce lien : Première partie du tutoriel sur les classes flexbox de Bootstrap

Mécanisme de base de la flexbox pour l’alignement des éléments imbriqués dans le conteneur flexible :

Le module flexbox dispose les éléments enfants d’un conteneur flexible unidimensionnellement. C’est-à-dire qu’il gère une seule dimension à la fois soit une ligne ou une colonne.

Pour la disposition de ces éléments, la flexbox fait intervenir deux axes : l’axe principal et l’axe secondaire (l’axe secondaire est celui qui est perpendiculaire à l’axe principal).

C’est pour faciliter sa manipulation, que Bootstrap l’a intégré et propose de simples classes pour réaliser ces dispositions.

Maintenant, découvrons les classes Bootstrap mises à notre disposition pour disposer ces éléments sur ces différents axes avec des exemples à l’appui.

Alignez les éléments sur l’axe principal :

Voici les différentes possibilités qui s’offrent à vous :

  • Vous pouvez aligner les éléments au début de l’axe principal en utilisant la classe bootstrap .justify-content-start
  • Ou soit aligner les éléments à la fin de l’axe en utilisant la classe .justify-content-end
  • Ou encore aligner les éléments au milieu de cet axe à l’aide de .justify-content-center

Les deux possibilités suivantes sont spéciales.

  • La flexbox vous offre la possibilité de répartir l’espace disponible le long de l’axe principal équitablement entre les éléments. C’est la classe bootstrap .justify-content-between qui vous permet de réaliser cet alignement.
  • Vous pouvez réaliser le contraire, en répartissant l’espace disponible autour des éléments à l’aide de la classe .justify-content-around.

Exemple 4 :

<h5 class="text-center">Utilisation de la classe <b>.justify-content-start</b></h5>
<div class="d-flex justify-content-start">          
    <div><p>Contenu1 </p></div>
      <div><p>Contenu2</p></div>
      <div><p>Contenu3</p></div>
</div>


<!-- Classe justify-content-end -->
<h5 class="text-center">Utilisation de la classe <b>.justify-content-end</b></h5>
<div class="d-flex justify-content-end">          
    <div><p>Contenu1 </p></div>
      <div><p>Contenu2</p></div>
      <div><p>Contenu3</p></div>
</div>

<!-- Classe justify-content-center -->
<h5 class="text-center">Utilisation de la classe <b>.justify-content-center</b></h5>
<div class="d-flex justify-content-center">          
    <div><p>Contenu1 </p></div>
      <div><p>Contenu2</p></div>
      <div><p>Contenu3</p></div>
</div>

<!-- Classe justify-content-between  -->
<h5 class="text-center">Utilisation de la classe <b>.justify-content-between </b></h5>
<div class="d-flex justify-content-between">          
    <div><p>Contenu1 </p></div>
      <div><p>Contenu2</p></div>
      <div><p>Contenu3</p></div>
</div>

<!-- Classe justify-content-around  -->
<h5 class="text-center">Utilisation de la classe <b>.justify-content-around </b></h5>
<div class="d-flex justify-content-around">          
    <div><p>Contenu1 </p></div>
      <div><p>Contenu2</p></div>
      <div><p>Contenu3</p></div>
</div>
Démo



Alignez les éléments sur l’axe secondaire :

La particularité de l’alignement sur l’axe secondaire est qu’en plus d’aligner tous éléments, vous avez la possibilité d’aligner juste un seul élément parmi l’ensemble.

Mais avant que vous ne découvriez les classes flexbox vous permettant de n’aligner qu’un seul élément parmi l’ensemble, vous allez tout d’abord découvrir les classes permettant d’aligner l’ensemble des éléments.

  • La classe .align-items-start vous permet d’aligner les éléments au début de l’axe secondaire.
  • .align-items-end, comme vous l’avez deviné cette classe aligne les éléments à la fin de l’axe
  • Pour aligner les éléments au milieu de l’axe, vous devez utiliser la classe .align-items-center
  • Vous avez aussi la possibilité d’étirer les éléments le long de l’axe à l’aide de la classe .align-items-strech. C’est le comportement qu’adoptent les éléments par défaut.

Exemple 5 :

<!-- Classe align-items-start -->
    <h5 class="text-center">Utilisation de la classe <b>.align-items-start</b></h5>
    <div class="d-flex flex-column align-items-start">      	
    	<div><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>


    <!-- Classe align-items-end -->
    <h5 class="text-center">Utilisation de la classe <b>.align-items-end</b></h5>
    <div class="d-flex flex-column align-items-end">      	
    	<div><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>

    <!-- Classe align-items-center -->
    <h5 class="text-center">Utilisation de la classe <b>.align-items-center</b></h5>
    <div class="d-flex flex-column align-items-center">      	
    	<div><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>

    <!-- Classe align-items-strech  -->
    <h5 class="text-center">Utilisation de la classe <b>.align-items-strech </b></h5>
    <div class="d-flex flex-column align-items-strech">      	
    	<div><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>
Démo



Alignez un seul élément parmi l’ensemble sur l’axe secondaire

Nous pouvons définir les mêmes comportements que nous avons définis pour les éléments imbriqués sur le long de l’axe secondaire pour un seul élément parmi l’ensemble.

Les classes flexbox que Bootstrap met à notre disposition pour agir sur un seul élément de l’ensemble sont presque identiques à celles qui permettent d’agir sur l’ensemble des éléments à la seule différence de remplacer items par self.

 Et vous intégrez la classe dans la balise de l’élément que vous voulez aligner.

Rien ne vaut mieux qu’un exemple illustratif.

Exemple 6 : Dans cet exemple nous agirons sur le premier élément de l’ensemble

<!-- Classe align-self-start -->
    <h5 class="text-center">Utilisation de la classe <b>.align-self-start</b></h5>
    <div class="d-flex flex-column">      	
    	<div class="align-self-start"><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>


    <!-- Classe align-self-end -->
    <h5 class="text-center">Utilisation de la classe <b>.align-self-end</b></h5>
    <div class="d-flex flex-column">      	
    	<div class="align-self-end"><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>

    <!-- Classe align-items-center -->
    <h5 class="text-center">Utilisation de la classe <b>.align-self-center</b></h5>
    <div class="d-flex flex-column">      	
    	<div class="align-self-center"><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>

    <!-- Classe align-items-strech  -->
    <h5 class="text-center">Utilisation de la classe <b>.align-self-strech </b></h5>
    <div class="d-flex flex-column">      	
    	<div class="align-self-strech"><p>Contenu1 </p></div>
          <div><p>Contenu2</p></div>
          <div><p>Contenu3</p></div>
    </div>
Démo



Si vous maitrisez bien ces classes flexbox de Bootstrap et leur utilisation, et que vous savez aussi très bien manipuler le système de grille de bootstrap, vous serez capable de réaliser des sites web ou thèmes avec de magnifiques mises en page.

Enregistrez-vous en un clic par le biais du lien suivant pour être informé à chaque fois qu’un nouveau tutoriel est mis en ligne : je veux m’inscrire.

Laisser un commentaire