Salut et bienvenue à le troisième jour de Bootstrap 4 ☺️ Aujourd’hui, nous apprenons à connaître le Bootstrap 4 Flex. Flexbox est un nouveau mode de mise en page en CSS3. Les options d’alignement et de mise en forme des éléments sont décrites. Connaître le fonctionnement du Bootstrap 4-Flex vous permettra d’aligner les éléments horizontalement et verticalement (à gauche, au centre et à droite), de les dimensionner en fonction des éléments parents et de leur dire comment remplir une ligne.

Bootstrap 4 a créé des classes autour des propriétés CSS3 afin que vous puissiez les utiliser facilement. Aujourd’hui, nous allons les parcourir et créer des exemples de scénarios. Les éléments d’alignement et de dimensionnement sont des éléments essentiels du développement frontal. Il est important que vous les ayez bien avant de démarrer les éléments et composants Bootstrap 4. J’ai personnellement sauté le didacticiel Flexbox lorsque je suis passé à Bootstrap 4. Et j’ai trouvé que je devais en apprendre très vite (un le premier jour où j’ai commencé à créer un site Web).

Dans l’article d’aujourd’hui, nous allons couvrir:

Commençons à nous pencher!

Promotion Bootstrap 4 Flex

Crédit photo à Zach Hink pour lui tirer.

Conteneur Bootstrap 4 Flex

Pour pouvoir utiliser les applications Flex, vous avez besoin d’un conteneur Flex. Ceci est un élément de la classe .d-flexou alors .d-inline-flex. Vous pouvez placer un conteneur flexible n’importe où sur la page avec laquelle vous souhaitez aligner les éléments d’une manière spécifique. Vous pouvez même l’avoir dans un autre conteneur, ou .col, ou alors .cardetc. Tous les éléments de ce conteneur seront convertis en éléments Bootstrap 4 flex. Vous verrez comment les éléments se comportent dans la section suivante, mais voyons maintenant à quoi ressemblent les conteneurs.

Création d’un conteneur Bootstrap 4 flex avec .d-flexaboutit à un élément qui est sur toute la largeur de son parent. Et créez un conteneur Bootstrap 4 Flex avec .d-inline-flex La largeur varie en fonction de la largeur du contenu. .d-inline-flex n’occupe que l’espace dont il a besoin pour afficher son contenu.

Voici quelques exemples de conteneurs Bootstrap 4 flex:

foncé

<div class="d-flex">
  I'm a flexbox container.
</div>

<div class="d-inline-flex">
  I'm an inline flexbox container. 
</div>

Bootstrap 4 éléments flex

Direction des éléments flexibles

Lorsque vous placez des éléments dans le conteneur Bootstrap 4 flex, ils sont alignés horizontalement de gauche à droite par défaut:

foncé

<div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Note latérale: Le conteneur flexible et les objets ne sont pas colorés. Je viens d’ajouter des couleurs pour les rendre plus belles dans ce tutoriel.

Aligner des éléments horizontalement a également une classe explicite appelée .flex-row. Mieux vaut l’écrire que de le laisser implicite, car cela vous aidera lorsque vous reviendrez sur votre code et l’adapterez également aux appareils mobiles. Pour que les éléments soient alignés de droite à gauche, vous devez utiliser le .flex-row-reverse Classer.

foncé

<div class="d-flex flex-row-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Utilisez la classe pour aligner les éléments verticalement .flex-column. Voici le résultat que vous obtiendrez:

foncé

<div class="d-flex flex-column">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Et pour aligner les éléments de bas en haut, vous devez utiliser la classe .flex-column-reverse.

foncé

<div class="d-flex flex-column-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Alignement des éléments flexibles sur l’axe principal

L’axe principal est celui avec lequel vous souhaitez aligner vos éléments. C’est l’horizontale quand tu vas avec .flex-row et la verticale si vous allez avec .flex-column.

Vos articles ont plusieurs options en termes de point de départ et également de distance entre eux. Vous pouvez aligner tous vos éléments avec au début .justify-content-start, centre avec .justify-content-center ou fin de ligne / colonne avec .justify-content-end. Ou vous pouvez les répartir uniformément .justify-content-between ou alors .justify-content-around.

foncé

<div class="d-flex justify-content-start">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-end">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-center ">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-between">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-around">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Alignement des éléments flexibles sur l’axe secondaire

L’axe secondaire est la verticale pour .flex-rowet l’horizontale pour .flex-column. Le paramètre par défaut du navigateur consiste à étirer l’élément sur toute sa hauteur ou sa largeur (vous pouvez également l’utiliser .align-items-stretch pour ce faire). Cependant, vous pouvez modifier ce comportement. Vous pouvez aligner les éléments avec au début .align-items-start, la fin avec .align-items-endou centre avec.align-items-center.

Voici quelques exemples:

foncé

<div class="row">
  <div class="col-4">
    <div class="d-flex align-items-start">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex align-items-center">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex align-items-end">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
</div>

Utilisant .align-items-baselinealigne les éléments le long de la ligne de base de leur contenu. J’ai également ajouté une image des éléments pour mieux comprendre cet alignement. La ligne noire montre où se termine le contenu de chaque élément.

foncé

Ligne de base Bootstrap 4 Flex Align

<div class="d-flex align-items-baseline">
  <div><h1>Flex item 1</h1></div>
  <div>Flex item 2</div>
  <div><h4>Flex item 3</h4></div>
</div>

Alignement des éléments flex individuels

Vous pouvez utiliser des marges automatiques pour séparer un élément des autres sur l’axe principal. Deux classes sont utilisées pour cela: .mr-autoet .ml-auto..mr-autorend l’élément sur lequel il est utilisé aussi loin que possible à gauche (avec les éléments en face de lui). Et .ml-autorend l’élément le plus à droite possible.

foncé

<div class="row">
    <div class="col-6">
      <div class="d-flex">
        <div>Flex item</div>
        <div>Flex item</div>
        <div class="ml-auto">Flex item</div>
      </div>
    </div>
    <div class="col-6">
      <div class="d-flex">
        <div class="mr-auto">Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </div>
    </div>
</div>

Vous pouvez également modifier l’orientation sur l’axe secondaire pour des éléments individuels. Vous devez utiliser des classes .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, .align-self-stretchsur l’article individuel de la flexbox.

Voici quelques exemples:

foncé

<div class="row">
  <div class="col-4">
    <div class="d-flex">
      <div>Flex item 1</div>
      <div class="align-self-center">Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex align-items-start">
      <div>Flex item 1</div>
      <div class="align-self-stretch">Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex">
      <div>Flex item 1</div>
      <div class="align-self-end">Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
</div>

Bootstrap 4 Flex Fill

Par défaut, la largeur des éléments Bootstrap 4 Flex correspond à la largeur de leur contenu. Même s’il y a plus qu’assez d’espace dans le conteneur pour les articles, ils ne grandiront pas. Flex veut que nous définissions leur degré de croissance. Il existe deux façons de répartir l’espace restant s’il y a de l’espace supplémentaire:

  1. Si vous voulez que les frères et sœurs divisent la largeur du conteneur en parties égales, vous devrez l’utiliser .flex-fill Classer. Avec cette approche, les éléments flexibles Bootstrap 4 dans le conteneur s’ajoutent à la largeur du conteneur (il n’y aura plus d’espace blanc).

foncé

<div class="d-flex flex-row">
   <div class="flex-fill">Flex item 1</div>        
   <div class="flex-fill">Flex item 2</div>     
</div>

2. Si vous souhaitez que l’espace restant soit utilisé pour des éléments spécifiques, vous devez spécifier les éléments à utiliser. Vous pouvez le faire en ajoutant cela.flex-grow-1à l’article flexbox. S’il n’y a qu’un seul article avec cela .flex-grow-1Génial, il obtiendra tout l’espace blanc restant. Cela signifie que les autres éléments n’occupent que la largeur de leur contenu et l’élément avec cela .flex-grow-1tout l’espace restant.

foncé

<div class="d-flex">
  <div class="flex-grow-1">Flex itemn 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Si vous avez plusieurs articles avec cela .flex-grow-1 Classe L’espace restant dans la ligne est divisé également entre eux.

foncé

<div class="d-flex">
  <div class="flex-grow-1">Flex itemn 1</div>
  <div class="flex-grow-1">Flex item 2</div>
  <div>Flex item 3</div>
</div>

Bootstrap 4 Flex Shrink

S’il n’y a pas assez d’espace dans le conteneur Flexbox pour les éléments qu’il contient, vous pouvez spécifier les éléments à réduire avec le .flex-shrink-1 Classer. S’il n’y a qu’un seul élément avec cela .flex-shrink-1 Génial, ce sera le seul qui rétrécit. S’il y a plusieurs éléments, ils seront réduits du même facteur.

foncé

<div class="d-flex">
  <div class="flex-shrink-1">Flex item 1</div>
  <div class="w-100">Flex item 2</div>
  <div class="w-100">Flex item 3</div>
</div>

<div class="d-flex panel">
  <div class="flex-shrink-1">Flex item 1</div>
  <div class="flex-shrink-1">Flex item 2</div>
  <div class="w-100">Flex item 3</div>
</div>

note latérale:: .w-100 est une classe utilitaire Bootstrap 4 qui rend l’élément avec lequel elle est utilisée 100% large.

Emballage des articles dans les conteneurs flexibles

Si votre conteneur Bootstrap 4 flex n’est pas assez grand pour ses éléments et que vous ne spécifiez pas que certains d’entre eux doivent être réduits, les éléments s’exécuteront sur le conteneur. La classe qui appelle explicitement ce comportement est .flex-nowrap.

foncé

<div class="d-flex flex-nowrap">
  <div class="item-big-width">Flex item 1</div>
  <div class="item-big-width">Flex item 2</div>
  <div class="item-big-width">Flex item 3</div>
</div>

Vous pouvez modifier ce comportement en demandant au conteneur de déplacer les éléments qui ne tiennent pas sur une autre ligne. Il faut ajouter ça .flex-wrap.

foncé

Classer. C’est ce qui se passera:

<div class="d-flex flex-wrap">
  <div class="item-big-width">Flex item 1</div>
  <div class="item-big-width">Flex item 2</div>
  <div class="item-big-width">Flex item 3</div>
</div>

Vous pouvez également remplir les lignes avec le en mode inverse .flex-wrap-reverse Classer.

foncé

<div class="d-flex flex-wrap-reverse">
  <div class="item-big-width">Flex item 1</div>
  <div class="item-big-width">Flex item 2</div>
  <div class="item-big-width">Flex item 3</div>
</div>

Réactivité Bootstrap 4 Flex

Toutes les classes que j’ai décrites dans ce didacticiel sont destinées aux mobiles. Si vous en utilisez un, décrivez d’abord le comportement d’un téléphone, et le comportement restera le même pour les écrans plus grands. Mais tout comme avec les lignes et les colonnes, vous pouvez spécifier le comportement que les éléments flex doivent avoir pour chaque point d’arrêt.

Chaque classe a des variations pour les points d’arrêt:

  • .d-flex livré avec .d-[breakpoint]-flex;;
  • .flex-row Avec .flex-[breakpont]-row;;
  • .flex-column Avec .flex-[breakpoint]-column;;
  • .justify-content-[option] Avec .justify-content-[breakpoint]-[option];;
  • .align-items-[option] Avec .align-items-[breakpoint]-[option];;
  • .align-self-[option] Avec .align-self-[breakpoint]-[option];;
  • .flex-fill Avec .flex-[breakpoint]-fill;;
  • .flex-grow-[0/1] Avec .flex-[brekapoint]-grow-[0/1];;
  • .flex-shrink-[0/1] Avec .flex-[brekapoint]-shrink-[0/1];;
  • .flex-wrap Avec .flex-[breakpoint]-wrap.

Les points d’arrêt sont les suivants:

  • sm pour les écrans à partir de 576px;
  • md pour les écrans à partir de 768px;
  • lg pour les écrans à partir de 992px;
  • et xl pour les écrans à partir de 1200px.

Par exemple, vous pouvez définir la direction de la flexbox sous forme de colonne pour les appareils mobiles et de ligne pour les écrans commençant par l’ordinateur portable:

<div class="d-flex flex-column flex-lg-row">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Et le résultat sur mobile ressemble à ceci:

Bootstrap 4 Flex Mobile

Et sur des écrans plus grands:

Ordinateur portable Bootstrap 4 flex

On peut alors choisir de centrer les éléments lorsqu’ils sont affichés sur des écrans plus grands:

<div class="d-flex flex-column flex-lg-row align-items-md-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Ce code laisse l’orientation des écrans ci-dessous lgLe point d’arrêt est le même et centre les éléments pour les écrans plus grands:

Bootstrap 4 Flex Center

foncé

Je recommande d’ajouter des classes pour différents points d’arrêt et de basculer entre les résolutions dans votre navigateur. Vous pouvez également diviser et modifier le CodePen que j’ai inclus dans cet article. Faites-moi savoir si quelque chose ne fonctionne pas comme prévu et je ferai de mon mieux pour vous aider!

C’est un wrap pour aujourd’hui! Vous pouvez vous caresser le dos car le plus dur est derrière vous. Vous devez maintenant comprendre les utilitaires de mise en page de base. Au cours des prochains jours, nous travaillerons avec les éléments et composants Bootstrap 4.

Crédit photo à Vincent Sholohov pour lui tirer.

Crédit photo pour l’image sélectionnée également Waldek Graczyk pour lui tirer.

Lectures complémentaires:

Partager c’est aimer!



Source link

Recent Posts