Création de cartes réactives de même hauteur avec CSS moderne (Magie de Flexbox et sans requêtes multimédias)-tutoriel CSS-php.cn

Building Responsive, Equal-Height Cards with Modern CSS (Magic of Flexbox & No Media Queries)

Table des matières

Présentation

Quel est notre objectif ?

Construire la structure à l'aide du HTML5 sémantique

Ajout du style à l'aide du CSS moderne
- Réinitialisation CSS
- Conception de la mise en page des cartes avec Flexbox
- Styliser l'image de la carte
- Styliser le contenu de la carte
- Styliser le bouton de la carte
- Ajout de transitions de survol
- Utilisation de variables CSS

Conclusion

Introduction

En tant que développeurs Web, nous rencontrons souvent le besoin de créer des composants de cartes. que ce soit pour une présentation de produit/projet, un profil d'utilisateur ou un article de blog, les cartes sont partout.

Dans le passé, créer des mises en page réactives était un défi. La création de ces conceptions est devenue beaucoup plus simple et intuitive grâce à l'avènement des techniques CSS modernes, en particulier CSS Flexbox.

Flexbox simplifie le processus de création de mises en page réactives. Nous pouvons facilement organiser, aligner et espacer les éléments dans un conteneur sans utiliser de requêtes multimédias complexes. Cela signifie que nous pouvons créer des mises en page qui s'adaptent parfaitement aux différentes tailles et orientations d'écran sans spécifier de points d'arrêt exacts.

Quel est notre objectif ?

L'objectif est de créer des cartes réactives de hauteurs égales sans compter sur des points d'arrêt en utilisant CSS Flexbox. Nous veillerons à ce que chaque carte conserve la même hauteur quelle que soit la longueur du contenu, en s'adaptant parfaitement aux différentes tailles d'écran.

Propriétés CSS clés pour la mise en page :

affichage : flex
aligner les éléments
justifier-contenu
flex-grow

Explorons maintenant la magie de CSS flexbox en construisant les cartes !

Construire la structure à l'aide du HTML5 sémantique

    Title one
 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
  
    Title two
 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
  
    Title three
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!

Copier après la connexion

Ajout du style à l'aide du CSS moderne

Réinitialisation du CSS

/* Basic CSS Reset */ * { margin: 0; padding: 0; box-sizing: border-box; }

Copier après la connexion

Le corps

/* Ensure that our layout is centred horizontally and vertically on the page */ body { display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */ justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; /* Prevent horizontal scrolling */ }

Copier après la connexion

Conception d'une disposition de carte avec Flexbox

/* Cards */ .card-container { display: flex; /* using CSS flexbox to display each card at the centre */ justify-content: center; align-items: stretch; /* use stretch for equal height of all cards */ gap: 1.5625rem; /* add space between each card */ flex-wrap: wrap; padding: 1rem; max-width: 100%; /* Prevent container from exceeding viewport width */ } .card { display: flex; flex-direction: column; width: 20rem; background-color: #fff; box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4); text-align: center; text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */ overflow: hidden; }

Copier après la connexion

Styliser le contenu interne de la carte

Styliser l'image de la carte

.card-image { width: 100%; height: auto; object-fit: cover; margin-bottom: 0.85rem; }

Copier après la connexion

Styliser le contenu de la carte

.card-title { font-size: 1.25rem; padding: 1rem; color: #3ca69f; } .card-description { flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */ padding: 0 1rem 1rem; font-size: 0.975rem; line-height: 1.5; }

Copier après la connexion

Styliser le bouton de la carte

/* Cards button */ .card-button { align-self: center; /* placing the button at the center */ margin: 1rem 0 3rem; padding: 0.625rem 1rem; font-size: 1rem; color: #ffffff; background-color: #3ca69f; border: none; border-radius: 0.3125rem; cursor: pointer; }

Copier après la connexion

Ajout de transitions de survol

.card { transition: 0.5s ease all; } .card-button { transition: 0.5s ease all; } /* cards hover effect */ .card:hover { background-color: #276662; color: #ffffff; } .card:hover > .card-button { background-color: #ffffff; color: #276662; font-weight: 700; } .card:hover > .card-title { color: #ffffff; }

Copier après la connexion

Utiliser des variables CSS

/* Declare variables */ :root { --primary-color: #3ca69f; --secondary-color: #276662; --text-color: #ffffff; --shadow-color: rgba(0, 0, 0, 0.4); --border-radius: 0.3125rem; --spacing: 1rem; --transition-duration: 0.5s; }

Copier après la connexion