Créer une mise en page de blog en Cards avec Flexbox

Créer un layout de blog avec Flex CSS

Largement utilisé pour créer des mises en page de site de blog, ou d'actualités, la mise en page en Card apporte une grande lisibilité pour l'internaute.
Grâce à CSS3 et à son mode de mise en page flexible, connu sous le nom de Flexbox, créer des cartes de conception est devenu plus facile et plus efficace que jamais.

Qu'est-ce que Flexbox ?

CSS Flexbox, ou Flexible Box Layout, est un mode de mise en page CSS3 qui permet de créer des interfaces utilisateur complexes et réactives. Avec Flexbox, vous pouvez facilement créer des mises en page flexibles qui s'adaptent dynamiquement à la taille de l'écran, sans avoir à utiliser de positions ou de flottants.

Les avantages de Flexbox

Flexbox offre plusieurs avantages par rapport aux techniques de mise en page CSS traditionnelles. Premièrement, il permet une mise en page fluide et flexible qui s'adapte automatiquement à la taille de l'écran, ce qui est essentiel pour la conception réactive. Deuxièmement, il simplifie la mise en page de plusieurs éléments, car il ne nécessite pas de positions ou de flottants. Enfin, Flexbox rend les mises en page complexes plus gérables et plus faciles à réaliser.

Comment fonctionne Flexbox ?

Flexbox fonctionne en appliquant des propriétés CSS spécifiques à un conteneur parent (la boîte flexible) et à ses enfants (les éléments flexibles). Ces propriétés contrôlent la direction, l'alignement, l'ordre et la taille des éléments flexibles à l'intérieur de la boîte flexible.

Propriétés du conteneur Flex

Les propriétés du conteneur flex sont appliquées à la boîte flexible elle-même et affectent la disposition de ses éléments flexibles. Ces propriétés incluent :

• display: flex : active le mode de mise en page Flexbox.
• flex-direction : cette propriété définit la direction principale dans laquelle les éléments flexibles sont placés. Les valeurs possibles sont row, row-reverse, column, et column-reverse.
• flex-wrap : contrôle si les éléments flexibles sont contraints à une seule ligne ou peuvent s'envelopper sur plusieurs lignes.
• justify-content : aligne les éléments flexibles le long de l'axe principal. Les valeurs possibles sont flex-start, flex-end, center, space-between, et space-around.
• align-items : aligne les éléments flexibles le long de l'axe transversal. Les valeurs possibles sont flex-start, flex-end, center, baseline, et stretch.
• align-content : aligne les lignes flexibles le long de l'axe transversal lorsque l'espace supplémentaire est disponible. Les valeurs sont similaires à celles de align-items.

Propriétés de l'élément Flex

Les propriétés de l'élément flex sont appliquées à des éléments flexibles individuels.
Ces propriétés incluent :

• order : contrôle l'ordre des éléments flexibles à l'intérieur du conteneur flex.
• flex-grow : définit la capacité de l'élément flex à grandir s'il y a de l'espace disponible.
• flex-shrink : définit la capacité de l'élément flex à rétrécir si l'espace nécessaire dépasse l'espace disponible.
• flex-basis : définit la taille initiale principale de l'élément flex avant que l'espace restant ne soit distribué.
• flex : est un raccourci pour flex-grow, flex-shrink, et flex-basis.
• align-self : permet d'override l'alignement par défaut du conteneur flex pour un élément flex spécifique.

Créer un layout cards pour un blog avec Flexbox

Maintenant que nous avons une compréhension de base de Flexbox, passons à la création d'un bloc Card. Une Card est une interface utilisateur couramment utilisée qui organise les informations sous forme de carte ou sous forme de bloc. Les Cards peuvent contenir divers éléments de contenu, tels que des images, du texte, des boutons et des liens. Grâce à Flexbox, nous pouvons créer facilement des Cards flexibles et réactives.

Étape 1 : structure HTML

La première étape pour créer une carte de conception avec Flexbox est de définir la structure HTML. Pour notre exemple, nous allons créer une simple Card avec une image, un titre, un paragraphe de texte et un bouton.

La structure HTML :

<div class="card">
  <img src="image.jpg" alt="Image de la carte">
  <h2>Titre de la carte</h2>
  <p>Contenu de la carte.</p>
  <a href="#" class="btn">Lire l'article</a>
</div>

Étape 2 : CSS de base

Ensuite, nous devons définir quelques styles CSS de base pour notre carte. Nous allons définir une largeur fixe pour la carte, ajouter un peu de marge pour l'espacement, et ajouter quelques styles pour l'image, le titre, le texte et le bouton.

Le CSS de base :

.card {
 flex: 0 1 calc(25% - 1em);
 margin : 1rem .42em; /* Vous spécifiez les marges que vous souhaitez */
}
.card img {
  width: 100%;
  height: auto;
}
.card h2 {
  font-size: 24px;
  padding: 15px 0;
}
.card p {
  font-size: 16px;
  padding-bottom: 15px;
}
.card .btn {
  display: block;
  width: 100%;
  padding: 10px 15px;
  text-align: center;
  background-color: #007BFF;
  color: white;
  text-decoration: none;
}

Étape 3 : mettons en place Flex

Maintenant, il est temps d'activer Flexbox. Pour ce faire, nous devons d'abord envelopper nos cartes dans un conteneur flex. Ensuite, nous définissons la propriété display de ce conteneur à flex.

Le layout HTML :

<div class="cards">
  <div class="card">
    <img src="image1.jpg" alt="Image de la carte 1">
    <h2>Titre de la carte 1</h2>
    <p>Contenu de la carte 1.</p>
    <a href="#" class="btn">Bouton</a>
  </div>
  <div class="card">
    <img src="image2.jpg" alt="Image de la carte 2">
    <h2>Titre de la carte 2</h2>
    <p>Contenu de la carte 2.</p>
    <a href="#" class="btn">Bouton</a>
  </div>
  <!-- Autres Cards... -->
</div>

Le CSS :

.cards {
  display: flex;
  flex-wrap: wrap;
}

Étape 4 : Ajouter la flexibilité

La prochaine étape consiste à rendre nos Cards flexibles. Pour ce faire, nous utilisons la propriété flex pour définir la capacité de croissance, la capacité de rétrécissement et la taille de base de nos Cards.

Avant d’entrer dans les détails, il est bon de revoir les bases de la propriété flex (vue ci-dessus). La propriété flex spécifie la longueur de l'élément, par rapport au reste des éléments flexibles à l'intérieur du même conteneur. La propriété flex est un raccourci pour les propriétés flex-grow, flex-shrink et flex-basis. La valeur par défaut est 0 1 auto;. À mon avis, la meilleure façon de bien comprendre Flexbox est de jouer avec les différentes valeurs et de voir ce qui se passe.

La propriété flex-grow d'un élément flex spécifie la quantité d'espace à l'intérieur du conteneur flex que l'élément doit occuper.

Dans notre exemple, nous définissons flex-grow à 0, flex-shrink à 1, et flex-basis à un pourcentage de l'espace disponible.

.card {
  flex: 0 1 25%;
  /* Autres styles... */
}

Étape 5 : rendre les Cards réactives par rapport à la taille du device (appareil)

Enfin, nous devons rendre nos Cards réactives. Pour ce faire, nous utilisons les requêtes média pour modifier la propriété flex-basis en fonction de la taille de l'écran. Dans cet exemple, nous définissons flex-basis à 100% pour les écrans de moins de 767 px de large, à 50% pour les écrans compris entre 768 px à 991 px de large, et à 25% pour les écrans de plus de 991 px de large.

@media screen and (max-width: 767px) {
  .card { flex: 0 1 calc(100% - 1em); }
}
@media only screen and (min-width: 768px and max-width: 991px) {
  .card { flex: 0 1 calc(50% - 1em); }
}
.card {
  flex: 0 1 25%; /* Appliqués à toutes les autres tailles d'écran, soit à plus de 991 px */
}