Cas d'utilisation pour Flexbox

Dans ce dernier article de la série, nous allons terminer en jetant un coup d'œil aux utilisations courantes de Flexbox. Pour quoi devrions-nous utiliser Flexbox, et en quoi ce n’est pas si bon?

Nous arrivons à la dernière partie de ma série Flexbox, ici, à Smashing Magazine. Dans cet article, je vais passer un peu de temps à réfléchir aux cas d'utilisation de Flexbox, étant donné que nous disposons maintenant de CSS Grid Layout, qui donne quelques suggestions sur ce que vous pouvez utiliser quand et un moyen de décider.

Dans cette série

Si vous n'avez pas encore repris les autres articles, il s'agit essentiellement d'un message de conclusion. Vérifiez-les d'abord. J'ai commencé par décrire exactement ce qui se passe lorsque vous créez un conteneur flexible . Dans le deuxième article de la série, j'ai examiné l'alignement et la façon dont nous alignons les éléments sur l'axe principal et l'axe transversal dans la boîte flexible. Dans le troisième article, je décris comment le dimensionnement fonctionne dans Flexbox et comment le navigateur détermine la taille d'un élément flex. Maintenant que nous savons exactement comment fonctionne Flexbox, nous pouvons conclure en pensant aux cas d'utilisation pour lesquels il convient de le faire.

Devrais-je utiliser Grid ou Flexbox?

C'est toujours la question la plus posée à mon propos lorsque j'enseigne. mise en page, et en général, je trouve que plus les gens s'habituent à travailler avec de nouvelles méthodes de mise en page, plus il devient question de vous poser moins de questions. Au fur et à mesure que vous construirez plus de composants, vous aurez une idée de la méthode de présentation à utiliser.

Si vous ne comprenez que bien l'idée, vous devez toutefois vous rappeler que CSS Grid Layout et Flexbox sont deux solutions. CSS . Que vous ayez spécifié l'affichage : grid ou display: flex vous utilisez souvent davantage d'éléments communs que d'autres. Grid et Flexbox utilisent les propriétés qui font partie de la spécification Box Alignment; Ils s’appuient tous deux sur les concepts détaillés dans CSS Intrinsic et Extrinsic Sizing.

Demander si votre conception doit utiliser Grid ou c'est un peu comme si vous demandiez si votre conception devait utiliser une taille de police ou . ] Couleur. Vous devriez probablement utiliser les deux, au besoin. Et personne ne viendra vous poursuivre si vous utilisez le mauvais

Nous ne faisons donc pas le choix entre Vue.js et React, Bootstrap ou Foundation. Nous utilisons CSS pour faire la mise en page, et nous devons utiliser les éléments de CSS qui conviennent le mieux à l'élément de notre conception sur lequel nous travaillons. Examinez chaque composant et déterminez ce qui est le mieux pour lui ou quelle combinaison de choses lui convient le mieux.

Il peut s'agir de Grid ou de Flexbox. Il peut s'agir d'un conteneur externe de grille avec certains de vos éléments de grille devenant des éléments flexibles ou l'inverse. Il n'y a aucun problème à imbriquer une grille dans un élément flex si cela correspond à ce que votre conception appelle.

Qu'est-ce que Flexbox, vraiment?

La spécification Flexbox décrit la méthode de présentation de ce type,

" superficiellement similaire à la disposition en blocs. Il manque beaucoup des propriétés plus complexes centrées sur le texte ou le document pouvant être utilisées dans la disposition de blocs, telles que les flottants et les colonnes. En retour, il dispose d'outils simples et puissants pour distribuer de l'espace et aligner le contenu de la manière dont les applications Web et les pages Web complexes ont souvent besoin. ”

Je pense que la phrase clé ici est“ distribuer de l'espace et aligner le contenu ”. Flexbox consiste à prendre un tas de choses (qui ont des tailles variables) et à les insérer dans un conteneur (qui a lui-même une taille variable). Flexbox est squishy. Flexbox essaie de créer la meilleure présentation possible pour nos éléments, en donnant plus d'espace aux objets volumineux et moins d'espace, tout en préservant la lisibilité du contenu.

Lorsque les utilisateurs trouvent Flexbox difficile et étrange, c'est souvent parce qu'ils essaient de l'utiliser. en tant que système de grille – essayant de reprendre le contrôle du dimensionnement et de la distribution de l'espace. Lorsque vous faites cela, Flexbox peut sembler étrange et difficile, car vous vous battez contre ce qui la rend exactement flexible, à savoir la flexibilité inhérente.

Par conséquent, les modèles qui conviennent très bien à la disposition de flex sont ceux pour lesquels nous ne sommes pas aussi intéressés. avoir une taille parfaite pour chaque article. Nous souhaitons simplement que ces éléments s'affichent bien l'un à côté de l'autre.

Voir le stylo Smashing Flexbox série 4: objets partageant l'espace de Rachel Andrew ( @rachelandrew ) sur CodePen .

Il existe également des modèles dans lesquels vous souhaitez que les lignes soient enveloppées, mais vous ne souhaitez pas une grille stricte. Si nous prenons la grille séminal par rapport à l'exemple Flexbox dans lequel nous utilisons la syntaxe de remplissage automatique répétitif dans la grille, puis un conteneur Flex avec des lignes flexibles enveloppées. Nous voyons immédiatement la différence entre les deux méthodes

Dans l'exemple de la grille, les éléments de la grille sont alignés en lignes et en colonnes. Alors que le nombre de suivis de colonne change (en fonction de l'espace), les éléments sont toujours placés dans la cellule de grille suivante disponible. En fait, il est impossible de demander à un élément de la grille d'étendre des pistes s'il existe des cellules vides pour remplir ce scénario de flux automatique.

Voir le stylo Smashing Flexbox, série 4: exemple de grille de Rachel Andrew ( @rachelandrew ) sur CodePen .

Dans l'exemple Flex, les éléments finaux se partagent le même espace; De cette façon, nous n'avons pas d'alignement horizontal ni vertical.

Voir le stylo Smashing Flexbox série 4: éléments enveloppés flex-base: auto de Rachel Andrew ( @rachelandrew ) CodePen .

Si nous avons une base flexible d'auto et que l'un des éléments flexibles est plus volumineux, ils disposeront également d'un espace supplémentaire de sorte que l'alignement puisse être très différent ligne par ligne. [19659027] Voir le stylo Smashing Flexbox série 4: articles emballés de Rachel Andrew ( @ rachelandrew ) sur CodePen .

Cet exemple est très clair. où nous voudrions utiliser Flexbox sur Grid Layout. Si nous voulons que les éléments soient emballés mais qu'ils occupent l'espace dont ils ont besoin ligne par ligne. C'est un type de mise en page très différent d'une grille. Ce type de motif peut être constitué d'un ensemble de balises (éléments à un ou deux mots que vous souhaitez afficher avec précision sous la forme d'un ensemble d'éléments), occupant l'espace nécessaire et non forcé de manière rigide dans une grille stricte.

Voir le Stylo Smashing Flexbox Series 4: Exemple de balises de Rachel Andrew ( @rachelandrew ) sur CodePen .

À l’heure actuelle, Flexbox est également le meilleur moyen centrer verticalement et horizontalement un article à l'intérieur d'un conteneur.

Voir le stylo Smashing Flexbox, série 4: Centrer un article de Rachel Andrew ( @rachelandrew ) sur . CodePen .

À l’avenir (lorsque les propriétés d’alignement des cases seront gérées par le navigateur en dehors de la disposition flex), nous pourrons le faire sans avoir à ajouter l’affichage : flex à la récipient. Pour l'instant, cependant, c'est ce que vous devez faire – cette ligne supplémentaire de CSS n'est vraiment pas un problème.

Flexbox sait très bien gérer les composants de petite taille et à une dimension. Des ensembles de champs de formulaire, d'icônes ou d'autres informations peuvent être facilement disposés et flexibles sans qu'il soit nécessaire de définir soigneusement le dimensionnement de chaque élément.

Voir le stylo Smashing Flexbox, série 4: éléments de rangée simples de Rachel Andrew ( @rachelandrew ) sur CodePen .

Vous pouvez également choisir Flexbox dans un scénario où tout ce que vous avez à faire est de créer un contenu au bas d'un mise en page de coller au fond d'un conteneur plutôt que de surgir. Dans cet exemple, je transforme le conteneur en conteneur Flex en affichant le contenu sous forme de colonne, puis en laissant le milieu grandir en poussant le pied de page au bas du composant.

Voir le stylo Smashing Flexbox Series 4: Sticky Footer Card de Rachel Andrew ( @rachelandrew ) sur CodePen .

En production, je trouve que Flexbox est utile pour beaucoup de petits travaux, en veillant à ce que les choses s'alignent correctement, cet espace est bien partagé entre les éléments. Vous pouvez absolument utiliser un conteneur de grille unidimensionnel pour certaines de ces choses, et ne vous en inquiétez pas si c'est ce que vous décidez de faire.

Cependant, je pense que Flexbox fait très bien, c'est de faire face à la Il peut être nécessaire d’ajouter des éléments supplémentaires que je ne pensais pas dans ma conception. Par exemple, si j'ai un composant de navigation utilisant Grid, je créerais suffisamment de pistes pour tous les éléments, car je ne voudrais pas qu'une nouvelle ligne soit créée si j'avais «trop» d'éléments. Avec flexbox, tant que je permettais aux éléments d'être flexibles à partir d'une base flexible de 0 (ou automatique), les éléments permettraient à leur nouveau compagnon de se placer dans la rangée et de lui laisser de la place.

When Should I Non

Nous avons examiné certaines des raisons pour lesquelles vous devriez choisir Flexbox plutôt que Grid Layout afin que nous puissions maintenant nous intéresser aux endroits où Flexbox n'est peut-être pas le meilleur choix. Nous avons déjà examiné notre exemple de Flexbox versus grille avec des éléments alignés horizontalement et verticalement par rapport à des éléments occupant ligne par ligne. Et, cette distinction est la première chose à considérer.

L'exemple de la grille est une disposition bidimensionnelle. Mise en page en lignes et en colonnes en même temps. L'exemple Flexbox est une disposition unidimensionnelle. Nous avons encapsulé des lignes flexibles, mais la distribution de l’espace se fait ligne par ligne. Chaque ligne agit essentiellement comme un nouveau conteneur Flex dans la direction Flex.

Par conséquent, si votre composant nécessite une présentation en deux dimensions, vous serez mieux placé pour utiliser Grid over Flexbox. Peu importe si votre composant est grand ou petit. Si vous prenez une chose de cet article, c'est de supprimer de votre cerveau l'idée que Grid n'est en quelque sorte destiné qu'à la mise en page principale et à la Flexbox pour les composants. Vous pouvez avoir un composant minuscule nécessitant une présentation bidimensionnelle et des structures de page principale mieux adaptées à une présentation unidimensionnelle.

Un autre bon point pour lequel Grid peut être considéré comme la meilleure solution est si vous appliquez une largeur ou une largeur. base flexible définie comme unité de longueur pour vos éléments flexibles afin de les aligner avec une autre rangée d'éléments flexibles ou simplement pour limiter la flexibilité d'une manière ou d'une autre. Très souvent, cela signifie que vous avez besoin d'une méthode de présentation bidimensionnelle ou que le contrôle du conteneur de grille convient mieux à votre présentation.

Par exemple, nous pourrions rendre notre présentation Flex plus semblable à une grille, en limitant la flexibilité de nos articles. Définissez flex-grow à 0 et dimensionner les éléments avec des pourcentages, de la même manière que nous dimensionnerions les éléments dans une «grille» flottante. Si vous constatez que vous le faites, je dirais que la disposition de la grille est une approche bien meilleure, car elle est conçue pour ce type de disposition.

Voir le stylo Smashing Flexbox série 4: éléments Flex enveloppés avec des largeurs en pourcentage de Rachel Andrew ( @rachelandrew ) sur CodePen .

Ceci étant dit, rappelez-vous qu'il n'existe très souvent pas de droit clair ou mauvaise réponse. Parfois, la seule chose que vous pouvez faire est d'essayer différentes manières et de voir ce qui convient le mieux au composant. N'oubliez pas que vous pouvez également changer de méthode de présentation, en utilisant Flexbox à un point d'arrêt et la Grille à un autre.

Et c'est ça (Flex) Wrap!

J'espère que cette série sur Flexbox a été utile et a montré comment comprendre certaines logiques. derrière l'alignement et le dimensionnement des articles flexibles, facilite la vie lorsque vous travaillez avec. Si vous vous posez des questions en suspens ou si vous avez un modèle qui ne semble pas avoir de réponse évidente en termes de méthode de présentation à utiliser, postez un commentaire.

(il)