Enfants répartis régulièrement

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS et apprendre à appliquer des styles à des documents HTML. Grâce à une série d'exercices pratiques, vous allez apprendre à créer et modifier des règles CSS, à utiliser des sélecteurs pour cibler des éléments spécifiques et à appliquer des styles au texte, aux fonds d'écran et aux bordures. À la fin de ce laboratoire, vous aurez une compréhension solide de CSS et serez capable de l'utiliser pour créer des pages web visuellement attrayantes.

Enfants répartis régulièrement

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

Pour répartir régulièrement les éléments enfants à l'intérieur d'un élément parent, utilisez la mise en page Flexbox en définissant la propriété display de l'élément parent sur flex. Pour répartir les enfants horizontalement avec un espace égal entre eux, utilisez justify-content: space-between. Pour répartir les enfants avec un espace autour d'eux, utilisez justify-content: space-around. Voici un exemple :

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

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

Sommaire

Félicitations ! Vous avez terminé le laboratoire Enfants répartis régulièrement. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.