Disposition flexible de cartes responsive

Introduction

Dans ce projet, vous allez apprendre à créer une disposition flexible de cartes à l'aide de CSS Flexbox. La disposition flexible de cartes est un motif de conception courant utilisé dans les pages web et les applications, où le contenu est affiché dans une structure en grille responsive et adaptable.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment sélectionner les éléments à disposer en tant que boîtes flexibles
• Comment contrôler le conditionnement des éléments flexibles dans le conteneur flexible
• Comment contrôler le positionnement des éléments flexibles sur l'axe principal

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser CSS Flexbox pour créer une disposition responsive et flexible
• Appliquer des techniques pour contrôler le comportement des éléments flexibles dans un conteneur flexible
• Mettre en œuvre des stratégies de positionnement et de distribution des éléments flexibles le long de l'axe principal

Skills Graph

Configure la structure du projet

Dans cette étape, vous allez apprendre à configurer la structure du projet.

Pour commencer, ouvrez l'éditeur. Vous devriez voir deux fichiers - flexible_card.html et flexible_card.css dans votre éditeur.

Cliquez sur "Go Live" dans le coin inférieur droit pour ouvrir le port 8080 et prévisualiser la page flexible_card.html dans le navigateur. L'effet sera le suivant :

Mise en place de dispositions flexibles

Dans cette étape, vous allez apprendre à utiliser des éléments flexibles pour la mise en page afin d'obtenir l'effet souhaité. Veuillez suivre les étapes ci-dessous pour terminer cette étape :

1. Ouvrez le fichier flexible_card.css dans votre éditeur.
2. Localisez le sélecteur section dans le fichier CSS.
3. Ajoutez la propriété display: flex; au sélecteur section pour transformer l'élément <section> en conteneur flexible.

Le code CSS mis à jour devrait ressembler à ceci :

section {
  display: flex; /* Transformer la section en conteneur flexible */
  /* Autres styles */
}

4. Ajoutez la propriété flex-wrap: wrap; au sélecteur section pour permettre aux éléments flexibles de passer à la ligne suivante s'ils ne rentrent pas sur la même ligne.

Le code CSS mis à jour devrait ressembler à ceci :

section {
  display: flex;
  flex-wrap: wrap; /* Permettre aux éléments flexibles de passer à la ligne suivante */
  /* Autres styles */
}

5. Ajoutez la propriété justify-content: space-between; au sélecteur section pour répartir les éléments flexibles régulièrement le long de l'axe principal, avec un espace égal entre eux.

Le code CSS mis à jour devrait ressembler à ceci :

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Répartir les éléments flexibles régulièrement le long de l'axe principal */
  /* Autres styles */
}

Après avoir effectué ces trois étapes, votre fichier flexible_card.css devrait ressembler à ceci :

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

Maintenant, votre disposition flexible de cartes devrait être complète et correspondre au résultat final montré dans l'exemple.

Sommaire

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires sur LabEx pour améliorer vos compétences.