Comment utiliser Flexbox pour créer une mise en page de conception de carte CSS moderne

Grâce à Flexbox, un nouveau mode de mise en page dans CSS3, nous pouvons obtenir toutes nos cartes à la suite, littéralement. Les conceptions de cartes ont gagné en popularité au cours des dernières années ; comme vous l'avez probablement remarqué, les sites de médias sociaux ont vraiment adopté les cartes. Pinterest et Dribbble utilisent des mises en page de cartes pour présenter des informations et des visuels. Et si vous aimez le Material Design, les cartes de Google sont bien décrites dans leur bibliothèque de modèles.

Personnellement, j'aime les mises en page de cartes pour leur lisibilité et leur défilement. Ils présentent la parfaite "rafale" d'informations d'une manière facile à parcourir, faire défiler et numériser en une seule fois.

Comment créer une mise en page de carte

Si vous avez déjà essayé des lignes de contenu de hauteur égale, vous savez que les créer n'a pas toujours été facile. Vous avez probablement dû faire pas mal de bricolage pour le faire fonctionner dans le passé. Grâce à Flexbox, ces jours sont pratiquement derrière vous. Selon le niveau de prise en charge du navigateur que vous devez fournir, vous devrez peut-être inclure des solutions de secours, mais la prise en charge du navigateur pour cette fonctionnalité est assez fiable de nos jours. Pour être sûr, assurez-vous de vérifier Flexbox sur le fidèle Puis-je utiliser. Et n'oubliez pas que vous ne devez jamais apporter de modifications à votre site en ligne. Essayez plutôt Local, une application de développement WordPress locale gratuite.

L'idée de base de Flexbox est que vous pouvez définir la propriété d'affichage d'un conteneur sur flex , ce qui « fléchira » la taille de tous les conteneurs qu'il contient. Les colonnes de hauteur égale et les options de mise à l'échelle et de contraction simplifieront la création de mises en page avancées. Commencer avec des cartes est comme une feuille de triche Flexbox, mais une fois que vous maîtrisez les bases, vous pouvez créer des mises en page plus complexes.

Flexbox et polyvalence

Les cartes sont polyvalentes, visuellement attrayantes et faciles à interagir sur les grands et les petits appareils, ce qui est parfait pour une conception réactive. Chaque carte agit comme un conteneur de contenu qui évolue facilement vers le haut ou vers le bas. À mesure que la taille des écrans diminue, le nombre de cartes dans la rangée diminue généralement et elles commencent à s'empiler verticalement. Il y a une flexibilité supplémentaire car ils peuvent être à hauteur fixe ou variable.

Comment créer la mise en page

Nous allons créer une disposition de carte Flexbox comportant une rangée de quatre conteneurs horizontaux sur des écrans plus grands, deux sur des écrans moyens et une seule colonne pour les petits appareils.

Vous trouverez ci-dessous l'extrait de code permettant de créer une mise en page de base pour afficher quatre cartes. Je n'inclus pas le contenu de la carte interne (car cela devient trop long dans les exemples de code), alors assurez-vous d'y mettre du contenu de démarrage (et que la quantité de contenu varie entre les quatre cartes). De plus, il y a une rangée de quatre cartes affichées ici pour commencer, mais d'autres peuvent être ajoutées si vous voulez voir le comportement avec plusieurs rangées de contenu. Tout le code peut être trouvé sur Codepen.

Pour afficher notre conception de mise en page dans un modèle de grille, nous devrons commencer par l'extérieur et progresser vers l'intérieur. Il est important de vous assurer que vous référencez le bon conteneur, sinon les choses deviendront un peu compliquées.

La section avec une classe de .cards est ce que nous allons cibler en premier. La propriété display du conteneur est ce que nous devons changer en flex .

Voici le code HTML avec lequel vous voudrez commencer :

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

Voici le CSS pour commencer :

.cards {
   display: flex;
   justify-content: space-between;
}

Propriété flexible

Avant d'aller trop loin, il est bon de connaître les bases de la propriété flex. 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 flexible spécifie la quantité d'espace à l'intérieur du conteneur flexible que l'élément doit occuper.

La propriété flex-shrink spécifie comment l'élément sera réduit par rapport au reste des éléments flexibles à l'intérieur du même conteneur.

La propriété flex-basis spécifie la taille principale initiale d'un élément flexible. Cette propriété détermine la taille de la boîte de contenu, sauf indication contraire à l'aide de box-sizing. Auto est la valeur par défaut lorsque la largeur est définie par le contenu, qui est similaire à width: auto; . Il occupera un espace défini par son propre contenu. Il peut y avoir une valeur spécifiée qui reste vraie comme on le voit dans le flex-basis: 15em; . Si la valeur est 0, les choses sont assez définies car l'élément ne se développera pas pour remplir l'espace libre.

Nous avons commencé avec display: flex; et justify-content: space-between; et à ce stade, les choses sont un peu imprévisibles. Flexbox est utilisé, même si ce n'est pas très évident pour le moment. Avec cette déclaration, chacun des éléments flexibles a été placé l'un à côté de l'autre dans une rangée horizontale.

Voir ça sur Codepen.

Vous vous demandez probablement pourquoi chacun de ces éléments flexibles a une largeur différente. Flexbox essaie de déterminer quelle est la plus petite largeur par défaut pour chacun de ces éléments. Et en raison des différentes longueurs de mots et d'autres éléments de conception, vous vous retrouvez avec ces boîtes de tailles différentes. Pour obtenir un look cohérent, nous devrons faire un peu plus de travail. Définir une enveloppe et déterminer la largeur souhaitée aidera à les transformer en cartes uniformes.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

Par défaut, les éléments flexibles essaieront tous de tenir sur une seule ligne. Ajout du flex-wrap: wrap; fait que les éléments s'enroulent les uns sous les autres car la valeur par défaut est pleine largeur.

Voir ça sur Codepen.

La pleine largeur est idéale pour les petits appareils, alors gardons cela à l'esprit lorsque nous planifions notre écran plus grand avant de nous attaquer à divers points d'arrêt. Lorsque nous modifions la largeur, les cartes commencent à paraître plus uniformes.

Nous devons maintenant ajouter la classe .card pour styliser nos cartes individuelles. Cela peut aller juste sous les styles .cards .

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

N'oubliez pas que la propriété flex est un raccourci : flex-grow vaut 0, flex-shrink vaut 1 et la width vaut 24 %. En ajoutant une largeur spécifiée, cela nous donne une rangée de quatre avec un peu d'espace entre.

Voir ça sur Codepen.

Nous définissons la propriété justify-content à des fins d'espacement. Le premier élément s'affiche à l'extrême gauche, les deuxième et troisième éléments s'affichent au milieu et le quatrième élément s'affiche à l'extrême droite. Comme la largeur de la carte est de 24 %, il reste un peu d'espace puisque nos quatre colonnes à 24 % ne totalisent pas 100 %. Il nous reste 4% pour être exact. Ces 4 % sont placés à parts égales entre chacun des éléments. Nous avons donc environ 1,33% d'espace entre les cartes.

Voir ça sur Codepen.

Nous pouvons également être plus précis en utilisant calc . Changer la valeur flex-basis pour utiliser calc ressemblerait à ceci :

.card {
	flex: 0 1 calc(25% - 1em);
}

Ce qui est cool avec cela, c'est que le navigateur va saisir 25% de l'espace et en supprimer 1 em, ce qui rend les cartes légèrement plus petites.

C'est une façon astucieuse d'ajuster l'espace disponible. Le 1em est réparti équitablement entre les articles et on se retrouve avec la mise en page parfaite.

Jusqu'à présent, nous n'avons pas beaucoup parlé de hauteur. J'ai ajouté une autre rangée de cartes pour montrer comment fonctionne la hauteur. Cela dépend de la carte qui a le plus de contenu – la hauteur des autres suivra. Par conséquent, chaque ligne de contenu aura la même hauteur.

Il s'agit d'une vue très "zoomée", mais vous remarquerez que la première ligne est assez haute car la deuxième carte contient plus de texte que les autres de cette ligne. La deuxième ligne contient moins de texte, elle est donc globalement plus courte.

Cartes pour petits appareils

Actuellement, nous avons quatre colonnes sur tous les écrans, ce qui n'est pas vraiment une bonne pratique. Si vous réduisez la fenêtre de votre navigateur, vous verrez que les quatre cartes sont simplement plus écrasées sur des écrans plus petits, ce qui n'est pas idéal pour la lisibilité. Heureusement, avec les requêtes des médias, les choses commenceront à s'améliorer.

Pour commencer à résoudre le problème, des points d'arrêt spécifiés garantiront que le contenu s'affiche correctement sur tous les différents types d'écran.

Voici les points d'arrêt suivants qui seront utilisés (n'hésitez pas à utiliser les vôtres également, les concepts s'appliquent toujours) :

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

Ça a été une grosse réflexion jusqu'à maintenant. Entrons dans l'état d'esprit mobile-first et commençons par le point d'arrêt min-width: 40em .

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

Avec ces modifications, les cartes s'afficheront en largeur plein écran et s'empileront les unes sous les autres sur tout écran inférieur à environ 640 pixels de large. Si vous développez la fenêtre du navigateur à quelque chose au-dessus de cela, la colonne de quatre revient. Cela a du sens car il y a une min-width minimale de 40em et c'est là que nous avons créé la rangée de quatre cartes.

Ce qui manque ici, c'est le juste milieu. Pour le milieu de gamme, avoir deux cartes à la suite est plus lisible, plutôt que les quatre cartes écrasées. Avant de déterminer la rangée de deux cartes, une autre requête multimédia doit être ajoutée pour s'adapter aux écrans les plus grands, qui auront la rangée de quatre cartes.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

La nouvelle requête multimédia avec une min-width minimale de 60em est l'endroit où les quatre cartes seront déclarées. La min-width minimale de 40em est l'endroit où la rangée de deux cartes sera déclarée. La magie opère avec la valeur flex calc de 50% - 1em.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

Avec ce simple changement, les choses fonctionnent maintenant ! Réduisez et agrandissez la fenêtre du navigateur pour vous assurer que tout semble correct.

Voir ça sur Codepen.

Si vos rangées de cartes semblent correctes, alors vous êtes prêt à partir ! Si vous essayez ce didacticiel et que la dernière ligne est inégale, continuez à lire.

Contenu dynamique et espacement de la dernière rangée de cartes

Selon votre nombre de cartes, vous pouvez ou non avoir une dernière rangée loufoque. S'il y a une dernière ligne complète ou une seule carte supplémentaire, il n'y aura pas de problème. Parfois, votre contenu sera planifié à l'avance, mais si le contenu est dynamique, la dernière ligne de cartes peut ne pas se comporter comme vous le souhaitiez. S'il y a plus d'une carte supplémentaire et que le contenu justifié est défini, l'espace entre elles sera égal et ne sera peut-être pas aligné avec la ou les lignes ci-dessus.

Pour obtenir ce look, il faut une autre façon de penser. Je dirais que ce n'est pas aussi efficace, mais c'est relativement simple.

Le style .cards et .card a été fait en dehors d'une requête multimédia :

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

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

Les media queries sont là où le nombre de cartes est déterminé :

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

Jetez un œil à Codepen pour voir la solution modifiée.

J'espère que cela vous donnera un aperçu de base des concepts Flexbox qui vous permettront de démarrer. Flexbox a une assez bonne prise en charge des navigateurs et les mises en page de cartes continueront d'être utilisées dans les conceptions de sites Web. Et rappelez-vous, les mises en page de cartes ne sont que le début de la façon dont vous pouvez utiliser Flexbox.

Suivant : Concevoir des sites WordPress plus rapidement

Dans ce guide, nous couvrirons des conseils sur la façon de travailler plus rapidement et d'accélérer votre flux de travail WordPress. De la configuration initiale du site à sa mise en ligne, découvrez comment vous pouvez réduire les heures de travail de votre travail quotidien !

Téléchargez le guide gratuit ici !

Qu'avez-vous construit d'autre avec Flexbox ? Partagez vos projets dans les commentaires !