Chapitre 550 | Bâtir une Card avec Flexbox

Bâtir une Card avec Flexbox

Voici la procédure complète, du plus petit élément au plus global, afin d’obtenir la structure finale de la carte. L’idée est de partir des contenus internes et d’enrichir progressivement la mise en page à l’aide de Flexbox en indiquant clairement les étapes et l’organisation.

N’hésitez pas à mettre des couleurs de fond pour vous repérer. Le Design Graphique réel sera fait uniquement à la fin pour ne pas venir perturber la construction de la structure responsive.

En bas de l’article, vous trouvez de l’aide. Mais essayer dans un premier temps de ne pas vous en servir.

Rappel : n’utilisez ChatGPT que pour corriger des balises pas fermées ou des détails. Ne demandez pas à ChatGPT de bâtir le HTML ou le CSS. Cela serait contre productif. Ce n’est pas l’objectif de l’exercice !

Travailler sur CodePen vous permettra de sauvegarder votre CARD comme un PEN.

RESPONSIVE

FlexBox s’occupe de tout. Il n’y a qu’un seul mediaqueries [@media (max-width: 768px) qui fait passer en colonne et aligne les nom des archis au milieu en texte-align center], tout le reste est élastique.

Structure HTML

Chaque encadré est un conteneur. L’ancêtre est une section, les autres sont des DIV.

Voici la liste des classes ordonnées du plus petit enfant vers l’ancêtre, en suivant l’ordre de droite à gauche :

  1. conteneur-photo-archi
  2. conteneur-nom-archi
  3. conteneur-archi
  4. conteneur-3archis
  5. conteneur-titre
  6. conteneur-phrase
  7. droite

  1. conteneur-photo
  2. gauche

  1. conteneur-card
  2. card-section

Plan d’action sommaire

  1. Commencer par les éléments « Archi » (les plus internes)
    • Créer une division pour la photo de l’archi, par exemple .conteneur-photo-archi.
      • Lui attribuer une couleur de fond ou une image et ajuster sa taille.
    • Créer une division pour le nom de l’archi, par exemple .conteneur-nom-archi.
      • Lui donner une couleur de fond, un padding, et organiser le texte (le nom de l’archi).
  2. Assembler l’archi complet dans .conteneur-archi
    • Créer une division .conteneur-archi qui contient .conteneur-photo-archi et .conteneur-nom-archi.
    • Transformer .conteneur-archi en conteneur Flexbox.
      • Décider de l’axe principal (horizontal ou vertical),
      • Autoriser, si besoin, le retour à la ligne (flex-wrap) pour s’assurer que le contenu s’adapte,
      • Ajuster l’alignement (justify-content, align-items) pour centrer la photo et le nom, ou pour répartir l’espace entre eux.
  3. Créer .conteneur-3archis pour regrouper plusieurs .conteneur-archi
    • Placer trois .conteneur-archi à l’intérieur d’une division .conteneur-3archis.
    • Donner un fond différent à .conteneur-3archis pour bien la distinguer.
    • Transformer .conteneur-3archis en conteneur Flex.
      • Utiliser justify-content: space-around ou une autre valeur appropriée pour répartir l’espace entre chaque archi.
      • Ainsi, les trois archis s’alignent côte à côte de manière équilibrée.
  4. Ajouter le titre et la phrase dans la colonne de droite (.droite)
    • Dans la partie droite de la carte, créer une division .droite qui contiendra :
      • Une division .conteneur-titre pour accueillir le titre,
      • La division .conteneur-3archis créée précédemment,
      • Une division .conteneur-phrase pour accueillir le texte explicatif.
    • Transformer .droite en conteneur Flex en mode colonne (flex-direction: column).
      • Répartir verticalement l’espace entre le titre, la section des archis et la phrase, par exemple avec justify-content: space-around pour un espacement équilibré.
      • Autoriser le flex-wrap si nécessaire, pour s’adapter à différentes largeurs d’écran.
  5. Gérer la colonne de gauche (.gauche) avec la photo de conférence
    • Créer une division .gauche pour accueillir .conteneur-photo.
    • Placer l’image de la salle de conférence en fond (background-image, background-size: cover, etc.) dans .conteneur-photo.
    • .gauche peut rester un conteneur simple ou être un flex si besoin, mais l’important est de lui donner des dimensions minimales (min-width, min-height) pour afficher correctement l’image.
  6. Assembler .gauche et .droite dans .conteneur-card
    • Créer une division .conteneur-card qui contiendra .gauche et .droite.
    • Transformer .conteneur-card en conteneur Flex.
      • Les deux colonnes (gauche et droite) s’alignent côte à côte.
      • Laisser .droite prendre toute la place restante (inserer : flex-grow: 1;) afin que la colonne de droite s’adapte à l’espace disponible.
      • Définir une largeur maximale (max-width) pour contrôler la taille de l’ensemble (.conteneur-card)
  7. Centrer .conteneur-card au sein de .card-section
    • Créer une section .card-section qui contiendra .conteneur-card.
    • Transformer .card-section en conteneur Flex.
      • Utiliser justify-content: center pour centrer la carte horizontalement dans la page.
    • Ajouter un display: flex à .card-section permet à la carte de se positionner au centre de l’écran, quels que soient les éléments environnants.
  8. Ajouter le responsive (media queries)
    • Pour les petits écrans, utiliser une media query afin que .conteneur-card passe en flex-direction colonne, ce qui place .gauche au-dessus de .droite.
    • Ajuster éventuellement le texte du titre ou la taille des images pour qu’ils restent lisibles sur mobile.


Aide


Bloqué ? voici la structure HTML – N’utilisez ce bouton qu’en cas de blocage ! ou pour vérifier votre structure.

Structure HTML


Bloqué ? voici la structure HTML et son contenu- N’utilisez ce bouton qu’en cas de blocage ! ou pour vérifier votre code.

Structure HTML & Contenu


Aide

Bloqué ? voici quelques CSS

.gauche {
    min-width: 300px;
    min-height: 200px;
}

.img-rounded {
    border-radius: 50%; /* Transformation en cercle parfait */
    width: 100px; /* Fixe la largeur */
    height: 100px; /* Fixe la hauteur pour un cercle parfait */
    object-fit: cover; /* Facultatif : s'assure que l'image remplit bien le cercle */
}
.conteneur-photo {
    background-image: url('https://placehold.co/300x300?text=PhotoSalleDeConference'); /* Lien de l'image */
    background-position: center center; /* Centre l'image horizontalement et verticalement */
    background-repeat: no-repeat; /* Désactive la répétition de l'image */
    background-size: cover; /* Adapte l'image pour couvrir toute la zone */
    height: 100%;
}
.conteneur-card {
    max-width: 1120px;
    display: flex;
}
.droite {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around; /* Espace égal entre les enfants */
    flex-wrap: wrap; /* Autorise le passage à la ligne si nécessaire */
}

Bloqué avec le CSS ?

Code CSS Complet


Aide

Le corrigé complet est accessible ici :

Corrigé Complet
Avant proposLexiqueIntégration WebRecours à l'IAChapitre 1 | Présentation de CodePenChapitre 5 | Afficher du texte avec HTML [ p / h ]Chapitre 10 | Comprendre la cascade en CSSChapitre 15 | Propriétés CSS pour le style des textesChapitre 17 | Sites de référencesChapitre 18 | Listes ordonnées et non ordonnéesChapitre 20 | A propos des commentairesChapitre 25 | Classes combinées et des déclarations communesChapitre 30 | VS Code & Structure minimale de page HTML5Chapitre 35 | Organiser les fichiers HTML et CSS dans un répertoireChapitre 40 | Insérer une image dans une page HTMLChapitre 50 | Placehold.co pour des images temporaireschapitre 55 | L'indentation en HTML et CSSChapitre 60 | Gagner en productivité sous VScodeChapitre 65 | La fonction "openfolder" et l'affichage multi onglet avec VScodeChapitre 70 | Balises ouvrantes, fermantes et orphelinesChapitre 75 | Vocabulaire essentielChapitre 80 | Sélecteurs imbriqués en CSSChapitre 85 | La balise SPANChapitre 90 | Comprendre les unités de mesure en CSSChapitre 80 | Sélecteurs multiples en CSSChapitre 90 | Intégration d'une vidéo YouTubeChapitre 95 | Intégration d’une Google MapChapitre 100 | Différencier une Page Web du DOMChapitre 105 | Padding et MarginChapitre 110 | Propriétés CSS padding et marginChapitre 115 | Rôle du DIVChapitre 120 | Le flux du texteChapitre 125 | Retour à la ligne [code vs affichage]Chapitre 130 | Z-indexChapitre 135 | Position FixedChapitre 140 | Position AbsoluteChapitre 145 | Fixed vs AbsoluteChapitre 150 | Image en BackgroundChapitre 155 | Les BordersChapitre 160 | Police de caractère OnlineChapitre 165 | Les boutonsChapitre 170 | Responsive : media queriesChapitre 175 | Pseudo-éléments ::before et ::afterChapitre 180 | Les liens HypertexteChapitre 185 | Les transitions animéesChapitre 190 | Navigation avec des ancresChapitre 300 | Flexbox et GridChapitre 500 | Base FlexChapitre 505 | Direction des enfants (flex-direction)Chapitre 510 | Alignement horizontal (justify-content)Chapitre 510 | Alignement vertical (align-items)Chapitre 515 | Gestion des retours à la ligne (flex-wrap)Chapitre 520 | Alignement des lignes (align-content)Chapitre 525 | Flex : Autres propriétésChapitre 550 | Bâtir une Card avec FlexboxChapitre 560 | Les dégradés / GradientsChapitre 570 | Les intégrations SVGChapitre 580 | Les Variables couleurs CSSChapitre 581 | Autres exemple de variablesChapitre 585 | La fonction calc() en CSSChapitre 590 | Formulaire