Techniques de centrage avec Flexbox réactif

CSSCSSBeginner
Pratiquer maintenant

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

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/selectors -.-> lab-35198{{"Techniques de centrage avec Flexbox réactif"}} css/box_model -.-> lab-35198{{"Techniques de centrage avec Flexbox réactif"}} css/width_and_height -.-> lab-35198{{"Techniques de centrage avec Flexbox réactif"}} css/display_property -.-> lab-35198{{"Techniques de centrage avec Flexbox réactif"}} css/flexbox -.-> lab-35198{{"Techniques de centrage avec Flexbox réactif"}} end

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.