Exemples de Flexbox

Je continue de publier des articles de Rachel Andrew sur les fonctionnalités de la technologie Flexbox CSS

Articles précédents de la série:

1. Que se passe-t-il lors de la création d'un conteneur Flexbox .
2. Tout ce que vous devez savoir sur l'alignement dans Flexbox .
3. Flexbox: quelle est la taille de cette boîte flexible? .

Nous sommes à la fin de ma série Flexbox ici au Smashing Magazine . Dans cet article, je vais passer un peu de temps à réfléchir aux véritables options d'utilisation de Flexbox , étant donné que nous avons maintenant la disposition de grille CSS , je donnerai quelques suggestions sur ce que vous pouvez utiliser quand et comment.

Plus tôt dans cette série

Si vous n'avez pas encore sélectionné d'autres articles, il s'agit essentiellement du dernier message, alors vérifiez-les d'abord. J'ai commencé par décrire ce qui se passe lorsqu'un conteneur flexible est créé . Dans le deuxième article de la série, j'ai examiné l' alignement et la façon dont nous alignons les éléments le long des axes principal et transversal dans flexbox . Dans le troisième article, je décompose comment fonctionne le redimensionnement dans Flexbox et comment le navigateur détermine la taille du flex. Maintenant que nous savons exactement comment fonctionne Flexbox , nous pouvons nous tourner pour réfléchir aux cas d'utilisation pour lesquels cela est le mieux.

Dois-je utiliser Grid ou Flexbox?

C'est toujours la principale question que l'on me pose lors de la formation en mise en page, et en général je pense que, comme les gens s'habituent de plus en plus à travailler avec de nouvelles méthodes, cela devient une question que vous devez vous poser moins souvent. À mesure que l'expérience grandit, vous comprendrez quelle méthode de mise en page utiliser.

Cependant, si vous commencez tout juste à comprendre cette pensée, n'oubliez pas que la disposition de grille CSS et Flexbox sont toutes deux CSS. Si vous avez spécifié display: grid ou display: flex , vous utilisez souvent plus en commun que les différences. Grid et Flexbox utilisent des propriétés qui font partie de la spécification Box Alignment ; les deux sont basés sur des concepts détaillés dans la spécification CSS de dimensionnement intrinsèque et extrinsèque. .

Demander si votre conception doit utiliser Grid ou Flexbox revient à demander si votre conception doit utiliser la taille ou la couleur de la police. Vous devriez probablement utiliser les deux si nécessaire. Et personne ne vous poursuivra si vous utilisez le mauvais.

Donc, nous ne choisissons pas entre Vue.js et React , Bootstrap ou Foundation . Nous utilisons CSS pour compléter la mise en page, et nous devons utiliser les particules CSS qui ont le plus de sens pour la partie spécifique de notre conception sur laquelle nous travaillons. Examinez chaque composant et décidez ce qui lui convient le mieux ou quelle combinaison d'éléments lui convient le mieux.

Il peut s'agir d'une grille ou d'une Flexbox . Il peut s'agir d'un conteneur de grille externe dans lequel certains éléments de grille deviennent flexibles ou réversibles. Il n'y a aucun problème à imbriquer l'élément flexible si nécessaire pour votre projet.

Qu'est-ce que Flexbox vraiment?

La spécification Flexbox décrit la méthode de disposition comme suit:

"La mise en page flexible ressemble à la mise en page de bloc . Il lui manque beaucoup plus de propriétés complexes de texte ou de document qui peuvent être utilisées dans les mises en page de bloc, telles que les flottants et les colonnes . Au lieu de cela, elle a reçu des outils simples et puissants pour l'allocation d'espace et l'alignement du contenu d'une manière, dont les applications Web et les pages Web complexes ont longtemps besoin. »

Je pense que l'expression clé ici est «allocation d'espace et alignement du contenu». Flexbox consiste à prendre un tas d'articles (qui ont des tailles différentes) et à les mettre dans un conteneur (qui peut lui-même être de taille variable). Flexbox est doux. Il essaie de créer la meilleure mise en page pour nos éléments, en donnant aux éléments plus grands plus d'espace et aux éléments plus petits moins d'espace, préservant ainsi la lisibilité du contenu.

Si les gens trouvent Flexbox complexe et cryptique, c'est souvent parce qu'ils essaient d'utiliser Flexbox comme système de grille , essayant de reprendre le contrôle de la taille et de la distribution de l'espace. Lorsque vous faites cela, Flexbox peut sembler étrange et compliqué, car vous avez du mal avec ce que fait Flexbox , c'est-à-dire avec sa flexibilité inhérente.

Par conséquent, les modèles qui conviennent très bien aux mises en page flexibles sont ceux dans lesquels nous ne sommes pas tellement intéressés à avoir la taille parfaite pour chaque élément. Nous voulons juste que ces éléments apparaissent côte à côte.

Il existe également des modèles dans lesquels vous souhaitez avoir des sauts de ligne, mais vous n'avez pas besoin d'une grille stricte. Si nous prenons l'exemple original Grid vs. Flexbox , où nous utilisons la syntaxe de remplissage automatique de répétition dans la grille, puis le conteneur flexible de retour à la ligne, nous verrons immédiatement la différence entre les deux méthodes.

Dans l'exemple de grille, les éléments de grille sont organisés en lignes et en colonnes. Lorsque le nombre de colonnes d'une piste change (selon l'espace), les éléments vont toujours à la cellule de grille disponible suivante. En fait, il n'y a aucun moyen de demander à un élément de grille d'entourer une piste à remplir dans un scénario d' écoulement automatique s'il y a d'autres cellules vides.

Dans l'exemple flex , les éléments résultants séparent l'espace laissé entre eux, nous n'utilisons donc pas d'alignement horizontal et vertical.

Si nous avons défini flex-base sur auto et que l'un des éléments flex est augmenté, le reste recevra également un espace supplémentaire afin que l'alignement puisse être différent d'une ligne à l'autre.

Ceci est un exemple très vivant de l'endroit où nous aimerions utiliser Flexbox sur la disposition de la grille . Si nous voulons que les éléments soient enveloppés, mais occupent l'espace dont ils avaient besoin, ligne par ligne. C'est très différent de la grille. Des modèles comme celui-ci peuvent être un ensemble de balises (un ou deux mots que vous souhaitez bien afficher comme un ensemble d'éléments) qui occupent l'espace dont vous avez besoin et ne sont pas insérés de manière rigide dans une grille stricte.

Flexbox est également actuellement le meilleur moyen de centrer verticalement et horizontalement un élément à l'intérieur d'un conteneur.

À l'avenir (si les navigateurs prennent en charge les propriétés d' alignement des boîtes en dehors de la mise en page flexible), nous pouvons le faire sans ajouter display: flex au conteneur. Pour le moment, cependant, tout ce que vous devez faire est une ligne CSS supplémentaire, ce qui n'est pas un problème.

Flexbox fonctionne très bien avec de petits composants unidimensionnels. Les ensembles de champs de formulaire, d'icônes ou d'autres informations peuvent être facilement organisés et flexibles sans avoir à dimensionner soigneusement chaque élément.

Vous pouvez également sélectionner Flexbox dans un scénario où le contenu doit être amené au fond du conteneur, l'empêchant de surgir. Dans l'exemple ci-dessous, je fais du conteneur un conteneur flexible, affichant le contenu sous forme de colonne, puis laisse le milieu grandir, en poussant le pied de page vers le bas du composant.

Pendant le développement, je trouve Flexbox utile pour de nombreuses petites tâches, effectuant correctement l'alignement et répartissant l'espace entre les éléments. Vous pouvez certainement utiliser un conteneur de maillage unidimensionnel pour certaines de ces tâches, et ne vous inquiétez pas de ce que vous décidez de faire.

Cependant, je pense que Flexbox sera le meilleur dans une situation où vous devrez ajouter des éléments supplémentaires auxquels je ne m'attendais pas dans ma conception. Par exemple, si j'ai un composant de navigation utilisant la grille , 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 assez longtemps, je permettrais aux éléments d'être flexibles avec flex-base 0 (ou auto ), puis les éléments eux-mêmes laisseraient le nouveau compagnon dans la ligne, libérant ainsi de l'espace pour lui.

Quand ne devez-vous pas utiliser Flexbox?

Nous avons examiné certaines considérations pour lesquelles je pense que vous devriez préférer Flexbox à la disposition de la grille , nous pouvons donc maintenant examiner certains des endroits où Flexbox pourrait ne pas être le meilleur choix. Nous avons déjà examiné notre exemple Flexbox versus grid avec des éléments alignés horizontalement et verticalement contre des éléments qui occupent l'espace ligne par ligne. Et cette différence est la première chose à considérer.

L'exemple de grille a une disposition en deux dimensions. Mise en page par ligne et colonne en même temps.

Exemple Flexbox est une disposition unidimensionnelle. Nous avons emballé des flex-lines, mais le placement dans l'espace se fait ligne par ligne. Chaque ligne agit essentiellement comme un nouveau conteneur flexible dans la direction Flex.

Par conséquent, si votre composant a besoin d'une disposition en deux dimensions, il serait préférable d'utiliser une grille plutôt qu'une Flexbox . Peu importe qu'il s'agisse d'un grand ou d'un petit composant. Si vous prenez une chose de cet article, retirez de votre tête l'idée que, pour une raison quelconque, la grille est destinée uniquement à la mise en page de la page principale et Flexbox pour les composants. Vous pouvez avoir un petit composant qui nécessite une mise en page bidimensionnelle et une structure de page principale mieux adaptée à une mise en page unidimensionnelle.

Un autre bon endroit où la grille pourrait être considérée comme la meilleure solution consiste à utiliser la largeur ou à définir la base de flexion comme unité de longueur de vos éléments flexibles pour les aligner avec une autre ligne d'éléments flexibles ou simplement pour limiter la flexibilité d'une manière ou d'une autre. Très souvent, cela indique soit que vous avez vraiment besoin d'une méthode de mise en page bidimensionnelle, soit que le contrôle du conteneur de grille est mieux adapté à votre mise en page.

Par exemple, nous pourrions faire ressembler davantage notre disposition flexible à une grille , ce qui limitera la flexibilité de nos éléments. Définir flex-grow à 0 et calculer la taille des éléments en pourcentage, de la même manière que nous avons déterminé la taille des éléments dans une "grille" flottante. Si vous vous trouvez en train de faire cela, je suggérerais qu'une disposition en grille soit la meilleure approche, car elle est conçue pour ce type de disposition.

Cela dit, souvenez-vous que très souvent, il n'y a pas de bonne ou de mauvaise réponse claire. Parfois, la seule chose que vous pouvez faire est d'essayer différentes méthodes et de voir ce qui fonctionne le mieux pour le composant. N'oubliez pas que vous pouvez également basculer entre les méthodes de disposition à l'aide de Flexbox à un point d'arrêt et de Grid à un autre.

Et donc, détendez-vous!

J'espère que cette série Flexbox a été utile et a démontré comment la compréhension de certains algorithmes d'alignement et d'étalonnage pour les éléments flexibles leur facilite la vie.

Si vous avez des questions non résolues ou si vous avez un modèle qui ne semble pas avoir de réponse évidente en termes de méthode de mise en page utilisée, laissez un commentaire.