← Retour au menu
Exercice 3 – Flexbox
3.1 Barre de navigation
/* Créez une barre de navigation horizontale avec un logo à gauche et des liens à droite : */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
3.2 Cartes de même hauteur
/* Créez 3 cartes côte à côte avec un footer qui reste toujours en bas : */
.cards {
display: flex;
gap: 20px;
}
.card {
display: flex;
flex-direction: column;
}
.card p {
flex: 1; /* Pousse le bouton en bas */
}
DÉMONSTRATION
Carte 2
Contenu beaucoup plus long pour tester l'alignement vertical des boutons avec la technique du flex 1.
En savoir plus