Quelle est la taille de cette boîte flexible?

Dans les deux derniers articles, nous avons examiné ce qui se passe lorsque nous créons un conteneur flexible et examinons également l’alignement. Cette fois, nous explorons le problème souvent complexe de dimensionnement dans Flexbox. Comment Flexbox décide-t-il de la taille des choses?

Ceci est la troisième partie de ma série sur Flexbox. Dans les deux derniers articles, nous avons examiné ce qui se passe lorsque vous créez un conteneur flexible et explorez l'alignement tel qu'il fonctionne dans Flexbox . Cette fois, nous allons examiner le dimensionnement. Comment pouvons-nous contrôler la taille de nos éléments flexibles, et quel choix fait le navigateur lorsqu'il contrôle la taille?

Affichage initial des éléments flexibles

Si j'ai un ensemble d'éléments dont la longueur du contenu est variable et définissez leur parent sur display: flex les éléments s'affichent sous la forme d'une ligne et s'alignent au début de cet axe. Dans l'exemple ci-dessous, mes trois éléments ont une petite quantité de contenu et peuvent afficher le contenu de chaque élément sous la forme d'une ligne ininterrompue. Il y a de la place à la fin du conteneur flexible dans lequel les articles ne se développent pas car la valeur initiale de flex-grow est 0 ne grossit pas .

Si j'ajoute du texte à ces éléments, ils finissent par remplir le conteneur et le texte commence à envelopper. Les cases sont affectées à une partie de l'espace dans le conteneur qui correspond à la quantité de texte dans chaque case – un élément avec une chaîne de texte plus longue se voit attribuer plus d'espace. Cela signifie que nous ne nous retrouvons pas avec une grande colonne maigre avec beaucoup de texte lorsque l'élément suivant ne contient qu'un seul mot.

Ce comportement vous sera probablement familier si vous avez déjà utilisé Flexbox, mais vous vous êtes peut-être demandé comment fonctionne le navigateur pour dimensionner, comme si vous regardiez plusieurs navigateurs modernes. chose. Cela s'explique par le fait que de tels détails sont définis dans la spécification, en veillant à ce que quiconque implémente Flexbox dans un nouveau navigateur ou un autre agent utilisateur soit informé de la manière dont ce calcul est censé fonctionner. Nous pouvons utiliser la spécification pour trouver cette information par nous-mêmes.

Le CSS Intrinsic Et la spécification de dimensionnement extrinsèque

Lorsque vous examinez le dimensionnement dans la spécification Flexbox, vous découvrez assez rapidement qu'une grande partie des informations dont vous avez besoin se trouvent dans une autre spécification – En effet, les concepts de dimensionnement que nous utilisons ne sont pas propres à Flexbox, tout comme les propriétés d'alignement ne sont pas propres à Flexbox. Cependant, pour savoir comment ces constructions de dimensionnement sont utilisées dans Flexbox, vous devez rechercher les spécifications de Flexbox. Cela peut sembler un peu comme si vous faisiez des allers-retours, alors je vais arrondir quelques définitions clés que je vais utiliser dans la suite de l'article.

Taille préférée

The la taille préférée d'une boîte est la taille définie par une largeur ou une hauteur ou les alias logiques pour ces propriétés de la taille en ligne et taille de bloc . En utilisant:

 .box {
    largeur: 500px;
}

Ou l'alias logique in-line-size :

 .box {
    taille en ligne: 500px;
}

Vous déclarez que vous voulez que votre boîte soit de 500 pixels de large ou 500 pixels dans la direction en ligne.

min-content Size

La ​​taille min-content est la plus petite qu'une boîte peut être sans provoquer de débordement. Si votre boîte contient du texte, toutes les opportunités possibles seront placées.

taille-max du contenu

La ​​taille max-content est la plus grande pour contenir le contenu. Si la boîte contient du texte sans formatage, elle apparaîtra comme une longue chaîne ininterrompue.

Taille principale de l'article

La ​​taille principale d'un article flexible est la taille a dans la dimension principale. Si vous travaillez en ligne – en anglais – la taille principale est la largeur. Dans une colonne en anglais, la taille principale est la hauteur.

Les articles ont aussi une taille principale minimale et maximale définie par leur largeur minimale ou min-hauteur sur le dimension principale.

Calcul de la taille d'un élément flexible

Maintenant que nous avons défini certains termes, nous pouvons examiner la taille de nos éléments flexibles. La valeur initiale des propriétés flex est la suivante:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

La flex- base est la chose à partir de laquelle la taille est calculée. Si nous fixons flex-basis à 0 et flex-grow à 1, toutes nos boîtes n'ont pas de largeur de départ, donc l'espace dans le conteneur flexible est réparties uniformément, en attribuant la même quantité d'espace à chaque élément.

Voir le stylo Smashing Flexbox Series 3: flex: 1 1 0; de Rachel Andrew ( @rachelandrew ) le CodePen .

Attendu que si flex-basis est auto et flex-grow: 1 seul l'espace de réserve est distribué , en tenant compte de la taille du contenu.

Voir le stylo Smashing Flexbox Série 3: flex: 1 1 texte abrégé automatique de Rachel Andrew ( @rachelandrew ) sur CodePen .

Dans les situations où il n'y a pas d'espace disponible, par exemple lorsque nous avons plus de contenu que ce que peut contenir une seule ligne, il n'y a pas d'espace à distribuer.

Voir le stylo Smashin g Flexbox Series 3: flex: 1 1 texte long auto de Rachel Andrew ( @rachelandrew ) sur CodePen .

Cela nous montre que auto signifie que c'est très important si nous voulons savoir comment Flexbox calcule la taille de nos boîtes. La valeur de auto sera notre point de départ.

Defining Auto

Lorsque auto est défini comme une valeur pour quelque chose dans CSS, sa valeur sera très spécifique. ce qui signifie dans ce contexte, un qui vaut la peine de regarder. Le groupe de travail CSS passe beaucoup de temps à déterminer ce que l'auto signifie dans n'importe quel contexte, comme l'explique pour l'éditeur de spécifications Fantasai .

Nous pouvons trouver l'information sur ce que auto signifie lorsqu'il est utilisé comme base flexible dans la spécification. Les termes définis ci-dessus devraient nous aider à disséquer cette déclaration.

«Lorsqu'il est spécifié sur un élément flexible, le mot-clé auto extrait la valeur de la propriété de taille principale en tant que« base flexible »utilisée. Si cette valeur est elle-même automatique, la valeur utilisée est `content`.»

Donc, si notre flex-basis est auto Flexbox examine la taille principale définie propriété. Nous aurions une taille principale si nous avions donné à nos articles flexibles une largeur de . Dans l'exemple ci-dessous, les éléments ont tous une largeur de 110px, ce qui en fait la taille principale car la valeur initiale de la flexibilité est auto.

Voir le stylo Smashing Flexbox Series 3: éléments flexibles avec une largeur par Rachel Andrew ( @rachelandrew ) sur CodePen .

Cependant, notre exemple initial comporte des éléments sans largeur, ce qui signifie que leur taille principale est auto et nous devons donc passer à la phrase suivante: «Si cette valeur est elle-même automatique, la valeur utilisée est content ».

la spécification dit à propos du mot clé content . Ceci est une autre valeur que vous pouvez utiliser (en prenant en charge les navigateurs) pour votre base flexible par exemple:

 .item {
    flex: 1 1 contenu;
}

La spécification définit content comme suit:

“Indique une taille automatique basée sur le contenu de l'article flexible. (Elle est généralement équivalente à la taille maximale du contenu, mais avec des ajustements pour gérer les proportions, les contraintes de dimensionnement intrinsèques et les flux orthogonaux ”

Dans notre exemple, avec les éléments flexibles contenant du texte, nous pouvons ignorer certains ajustements compliqués et traiter content comme étant la taille maximale du contenu.

Cela explique donc pourquoi, lorsque nous avons une petite quantité de texte dans chaque élément, le texte ne s’emballe pas. taille automatique, afin que Flexbox examine leur taille de contenu maximale, les éléments tiennent dans leur conteneur à cette taille, et le travail est terminé!

L'histoire ne s'arrête pas là, car lorsque nous ajoutons du contenu, les boîtes ne restent pas à la taille maximale du contenu, sinon ils sortiraient du conteneur flexible et provoqueraient un débordement.Une fois qu'ils rempliraient le conteneur, le contenu commencerait à s'emballer et les éléments prendraient des tailles différentes en fonction du contenu qu'ils contiennent. 19659063] Résolution des longueurs flexibles

C'est à ce stade que la spécification devient relativement complexe, cependant, les étapes à suivre sont les suivantes:

D'abord, ajoutez la taille principale de tous les éléments et vérifiez qu'elle est plus grande ou plus petite que l'espace disponible dans le conteneur.

Si la taille du conteneur est plus grande que le total, nous allons nous intéresser au facteur de flexibilité car nous avons de la place pour grandir.

Si la taille du conteneur est inférieure au total, nous nous intéresserons au facteur de flex-shrink car nous avons besoin de réduire.

Gelez tous les éléments inflexibles, ce qui signifie que nous pouvons déjà choisir une taille pour certains éléments. Si nous utilisons flex-grow cela inclurait tous les éléments dont le coefficient de croissance est : 0 . C'est le scénario que nous avons lorsque nos articles flexibles ont de la place dans le conteneur. La valeur initiale de flex-grow est 0, ils sont donc aussi gros que leur largeur maximale et ne grandissent plus depuis leur taille principale.

Si nous utilisons flex-shrink cela inclurait tous les éléments avec flex-shrink: 0 . Nous pouvons voir ce qui se passe dans cette étape si nous donnons à notre ensemble d'éléments flexibles un facteur de flex-shrink de 0. Les éléments sont gelés dans leur état max-content et donc flex et se arrangent pour tenir dans le conteneur.

Voir le stylo Smashing Flexbox Series 3: flex: 0 0 auto par Rachel Andrew ( @rachelandrew ) sur CodePen .

Dans notre cas – avec les valeurs initiales des articles flexibles – nos articles peuvent diminuer. Les étapes continuent donc et l'algorithme entre dans une boucle dans laquelle il détermine combien d'espace attribuer ou retirer. Dans notre cas, nous utilisons flex-shrink car la taille totale de nos articles est plus grande que le conteneur, nous devons donc enlever de la place.

Le facteur flex-shrink est multiplié par la taille de la base intérieure dans notre cas la taille max-content . Cela donne une valeur avec laquelle réduire l'espace. Si les éléments ne retiraient de l’espace que selon le facteur de flex-shrink les petits objets pouvaient essentiellement disparaître, tout leur espace ayant été éliminé, tandis que les plus gros objets avaient encore de la place pour rétrécir.

Entrez dans cette boucle pour rechercher les éléments qui deviendraient plus petits ou plus grands que leur taille principale cible, auquel cas l'élément cesse de croître ou de se réduire. Encore une fois, cela évite que certains éléments deviennent minuscules ou massifs par rapport aux autres éléments.

Tout cela a été simplifié en termes de spécifications, car je n'ai pas examiné certains des scénarios les plus complexes, et vous pouvez généralement simplement aller plus loin dans votre esprit, en supposant que vous êtes heureux de laisser Flexbox faire son travail et que vous n'êtes pas au-delà de la perfection des pixels. Se souvenir des deux faits suivants fonctionnera dans la plupart des cas.

Si vous grandissez à partir de auto alors la base flexible sera traitée comme une largeur ou une hauteur sur l'article ou la taille max-content . L'espace sera ensuite attribué selon le facteur de flexibilité de croissance en utilisant cette taille comme point de départ.

Si vous enlevez auto puis la flex-based sera soit traité comme n'importe quelle largeur ou hauteur sur l'article ou la taille max-content . L'espace sera ensuite supprimé conformément à la taille de flex-basis multipliée par le facteur de flex-shrink et sera donc supprimé proportionnellement à la taille maximale des éléments.

Contrôler la croissance et la réduction

J'ai passé la majeure partie de cet article à décrire ce que fait Flexbox lorsqu'il est laissé à lui-même. Bien entendu, vous pouvez exercer un plus grand contrôle sur vos éléments flexibles en utilisant les propriétés flex . Avec un peu de chance, ils paraîtront plus prévisibles avec une compréhension de ce qui se passe dans les coulisses.

En définissant votre propre flex-basis ou en lui attribuant une taille qui sera ensuite utilisée flex-basis vous reprenez le contrôle de l'algorithme en indiquant à Flexbox que vous souhaitez augmenter ou diminuer cette taille. Vous pouvez désactiver la croissance ou la réduction totale en définissant à flex-grow ou flex-shrink sur 0. Sur ce point, il est toutefois souhaitable d'utiliser un contrôle des éléments flexibles. le temps de vérifier si vous utilisez la bonne méthode de mise en page. Si vous essayez d'aligner des éléments flexibles en deux dimensions, vous feriez peut-être mieux de choisir Grid Layout.

Débogage des problèmes liés à la taille

Si vos flex sont de taille inattendue, c'est généralement parce que votre flex -basis est automatique et quelque chose donne à cet élément une largeur qui est ensuite utilisée comme base flexible. Inspecter l'élément dans DevTools peut aider à identifier d'où vient la taille. Vous pouvez également essayer de définir un flex-basis de 0 qui forcera Flexbox à traiter l'élément avec une largeur nulle. Même si ce n’est pas le résultat souhaité, il sera utile d’identifier la valeur de flex-basis comme étant la cause de vos problèmes de dimensionnement.

Flex Gaps

La fonctionnalité requise de Flexbox est la possibilité de spécifier des espaces ou des gouttières entre les éléments flexibles de la même manière que nous pouvons spécifier des lacunes dans la disposition de la grille et la disposition multi-colonnes. Cette fonctionnalité est spécifiée pour Flexbox dans le cadre de l'alignement des boîtes, et la première implémentation du navigateur est en cours. Firefox prévoit d’offrir les propriétés d’écart pour Flexbox dans Firefox 63. L’exemple suivant peut être affiché dans Firefox Nightly.

Voir le stylo Smashing Flexbox Series 3: écarts de flexibilité par Rachel Andrew ( @rachelandrew ) sur CodePen .

Comme pour la disposition de la grille, la longueur de l'espace est prise en compte avant que l'espace ne soit distribué aux éléments flex.

Wrapping Up

Dans cet article, j'ai essayé d'expliquer Flexbox détermine la taille des éléments flexibles. Cela peut sembler un peu académique, cependant, prendre un peu de temps pour comprendre comment cela fonctionne peut vous faire économiser beaucoup de temps lors de l'utilisation de Flexbox dans vos mises en page. Je trouve très utile de revenir sur le fait que, par défaut, Flexbox essaie de vous donner la disposition la plus judicieuse d'un groupe d'éléments de tailles différentes. Si un élément a plus de contenu, il lui est donné plus d'espace. Si vous et votre concepteur n'êtes pas d'accord avec ce que Flexbox pense être le meilleur, vous pouvez reprendre le contrôle en définissant votre propre flex-basis .

(il)