LabEx
EntrerRejoindre

Techniques de centrage avec Flexbox réactif

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons explorer le concept de centrage avec Flexbox en CSS. Vous allez apprendre à centrer horizontalement et verticalement les éléments enfants à l'intérieur d'un élément parent à l'aide de Flexbox. À la fin de ce laboratoire, vous serez capable de créer des maquettes réactives et visuellement attrayantes en utilisant les techniques de centrage avec Flexbox.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 94%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Centrage avec Flexbox

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour centrer horizontalement et verticalement un élément enfant à l'intérieur d'un élément parent à l'aide de Flexbox, suivez ces étapes :

  1. Créez une disposition Flexbox en définissant la propriété display de l'élément parent sur flex.
  2. Utilisez la propriété justify-content pour centrer horizontalement l'enfant en définissant sa valeur sur center.
  3. Utilisez la propriété align-items pour centrer verticalement l'enfant en définissant sa valeur sur center.
  4. Ajoutez l'élément enfant à l'intérieur de l'élément parent.

Voici un extrait de code d'exemple :

<div class="flexbox-centering">
  <div>Contenu centré.</div>
</div>

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur le centrage avec Flexbox. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.