Que se passetil lorsque vous créez un conteneur Flexbox Flex?

Dans mon monde idéal, CSS Grid et Flexbox seraient arrivés ensemble, entièrement formés pour constituer un système de mise en page pour le web. Au lieu de cela, nous avons d'abord utilisé Flexbox et, comme il était plus facile de créer des mises en page de type grille que des flottants, nous nous sommes retrouvés avec beaucoup de systèmes de grille Flexbox. En fait, beaucoup des endroits où les gens trouvent Flexbox difficile ou déroutant sont vraiment en raison de cette tentative pour en faire une méthode pour la disposition de la grille.

Dans une courte série d'articles, je vais passer un peu de temps à déballer la Flexbox en détail – de la même manière que j'ai fait dans le passé avec la grille. Nous verrons les choses pour lesquelles Flexbox a été conçu, ce que ça fait vraiment bien, et pourquoi nous ne pourrions pas le choisir comme méthode de mise en page. Dans cet article, nous allons examiner en détail ce qui se passe réellement lorsque vous ajoutez display: flex à votre feuille de style.

Un conteneur Flex, SVP!

Pour utiliser Flexbox, vous avez besoin un élément qui sera le conteneur flexible. Dans votre CSS, vous utilisez display: flex :

Voir le Pen Smashing Flexbox Series 1: affichage: flex; par Rachel Andrew ( @rachelandrew ) CodePen .

Penchons-nous un peu sur ce que display: flex signifie vraiment. Dans le module d'affichage niveau 3 chaque valeur d'affichage est décrite comme étant une combinaison de deux éléments: un modèle d'affichage interne et un modèle d'affichage externe. Quand on ajoute display: flex on définit vraiment display: block flex . Le type d'affichage extérieur de notre conteneur flexible est bloc ; il agit comme un élément de niveau bloc dans un flux normal. Le type d'affichage interne est flex donc les éléments directement à l'intérieur de notre conteneur participeront à la disposition flexible.

C'est quelque chose que vous n'avez peut-être jamais vraiment pensé mais que vous comprenez probablement. Le conteneur flexible agit comme n'importe quel autre bloc sur votre page. Si vous avez un paragraphe suivi par un conteneur flexible, ces deux choses se comportent comme nous nous sommes habitués à bloquer les éléments se comportant.

On peut aussi définir notre container avec une valeur de inline-flex qui est comme utiliser display: inline flex , c'est-à-dire un conteneur flexible qui agit comme un élément de niveau en ligne, avec des enfants qui participent à la disposition flexible. Les enfants de notre conteneur flexible en ligne se comportent de la même manière que les enfants de notre conteneur flexible en ligne se comportent; la différence est la façon dont le récipient se comporte lui-même dans la disposition générale.

Voir le stylo Smashing Flexbox Series 1: affichage: inline-flex; par Rachel Andrew ( @rachelandrew ) on CodePen .

Ce concept d'éléments ayant un type d'affichage externe, qui définit comment ils se comportent comme une boîte sur la page (plus un type d'affichage interne) dictant le comportement de leurs enfants est très utile. Vous pouvez appliquer cette réflexion à n'importe quelle case en CSS. Comment cet élément agit-il? Comment les enfants de cet élément agissent-ils? Les réponses se rapportent à leurs modèles d'affichage externe et interne.

Lignes ou colonnes?

Une fois que nous avons défini notre conteneur flexible, certaines valeurs initiales entrent en jeu. Sans ajouter de propriétés supplémentaires, les éléments flex s'affichent en tant que ligne. Cela se produit parce que la valeur initiale de la propriété flex-direction est ligne . Si vous ne le définissez pas, vous obtenez une ligne.

La propriété flex-direction permet de définir la direction de l'axe principal. Les autres valeurs pour flex-direction sont:

• colonne
• row-reverse
• colonne-reverse

Avec nos items d'affilée, les items sont placés avec le premier item au commencez le bord de la dimension en ligne et affichez dans l'ordre dans lequel ils apparaissent dans la source. Dans la spécification, cette arête est décrite comme main-start :

Si nous utilisons la colonne de valeur les éléments commencent à être disposés à partir du bord de départ de la dimension de bloc et forment donc une colonne.

Lorsque nous utilisons row-reverse l'emplacement de main-start et main-end est commuté; par conséquent, les objets se rangent les uns après les autres dans l'ordre inverse.

La valeur column-reverse fait la même chose. Il est important de se rappeler que ces valeurs ne "changent pas l'ordre des objets" bien que ce soit ce qui se passe, ils changent l'endroit où le flux d'éléments commence: en changeant où le départ principal est. Donc, nos articles affichent dans l'ordre inverse, mais c'est parce qu'ils commencent à disposer à l'autre extrémité du conteneur.

Il est également important de se rappeler que lorsque cela se produit, l'effet est purement visuel. Nous demandons aux objets de s'afficher eux-mêmes à partir du bord d'extrémité; ils coulent toujours dans le même ordre et c'est l'ordre que votre lecteur d'écran utilise et aussi l'ordre dans lequel ils peuvent être passés. Vous ne devriez jamais utiliser row-reverse lorsque ce que vous voulez vraiment faire est de changer l'ordre des éléments. Faites ce changement dans votre source de document.

Les deux axes de Flexbox

Nous avons déjà exposé une caractéristique importante de flexbox: la possibilité de changer l'axe principal d'une ligne à l'autre. Ce changement d'axe est la raison pour laquelle je pense qu'il est souvent plus facile de comprendre des choses comme l'alignement dans la grille d'abord. Avec Grid, travaillant en deux dimensions, vous pouvez aligner sur les deux axes à peu près de la même manière. Flexbox est un peu plus compliqué parce que différentes choses se produisent selon que vous travaillez avec l'axe principal ou l'axe croisé.

Nous avons déjà rencontré l'axe principal, c'est-à-dire l'axe que vous définissez comme flex -direction . L'axe transversal est l'autre dimension. Si vous avez défini flex-direction: row votre axe principal se trouve le long de la ligne et votre axe transversal se trouve dans les colonnes. Avec flex-direction: colonne l'axe principal est en bas de la colonne et votre axe transversal le long des lignes. C'est ici que nous devons explorer une autre caractéristique importante de Flexbox, et c'est le fait qu'elle n'est pas liée aux dimensions physiques de l'écran. Nous ne parlons pas d'une ligne de gauche à droite ou d'une colonne de haut en bas, car ce n'est pas toujours le cas.

Modes d'écriture

Lorsque j'ai décrit la ligne et la colonne ci-dessus, j'ai mentionné le bloc et en ligne dimensions . Cet article est écrit en anglais, qui est un mode d'écriture horizontal. Cela signifie que lorsque vous demandez à Flexbox de vous donner une ligne, vous obtenez un affichage horizontal de vos éléments flexibles. Dans ce cas, main-start est à gauche – l'endroit où les phrases commencent en anglais

Si je travaillais dans une langue de droite à gauche telle que l'arabe, alors le bord de départ serait sur la droite:

Voir le stylo Smashing Flexbox Series 1: ligne avec le texte rtl par Rachel Andrew ( @rachelandrew ) le CodePen . [19659008] Les valeurs initiales de flexbox signifient que si tout ce que je fais est de créer un conteneur flexible, mes objets commenceraient sur la droite et seraient affichés en se déplaçant vers la gauche. Le bord de départ dans la direction inline est l'endroit où les phrases commencent dans le mode d'écriture que vous utilisez .

Si vous vous trouvez en mode d'écriture verticale et que vous demandez une ligne, votre rangée passera verticalement, car c'est ainsi que les lignes de texte s'exécutent dans une langue verticale. Vous pouvez essayer cela en ajoutant la propriété écriture-mode à votre conteneur Flex et en le définissant à la valeur vertical-lr . Maintenant, lorsque vous réglez flex-direction à row vous obtenez une colonne verticale d'éléments.

Voir le Pen Smashing Flexbox Series 1: ligne avec une écriture verticale mode par Rachel Andrew ( @rachelandrew ) le CodePen .

Donc une ligne peut fonctionner horizontalement, avec un départ principal de la gauche ou le droit, et aussi courir verticalement avec départ principal au sommet. C'est toujours une flex-direction de row même si nos esprits habitués au texte horizontal ont du mal à penser à une ligne verticale

la dimension de bloc, nous définissons la valeur de flex-direction à colonne ou colonne inverse . En anglais (ou en arabe), nous voyons ensuite les éléments qui s'affichent les uns sur les autres, en commençant par le haut du conteneur.

Dans un mode d'écriture verticale, la dimension Bloc s'étend sur la page, comme c'est la direction dans laquelle les blocs sont disposés dans ces modes d'écriture. Si vous demandez une colonne dans vertical-lr vos blocs iront de gauche à droite verticalement:

Voir le stylo Smashing Flexbox Series 1: colonne en mode d'écriture verticale-lr par Rachel Andrew ( @rachelandrew ) le CodePen .

Cependant, peu importe dans quelle direction les blocs sont affichés, si vous travaillez avec une colonne Ensuite, vous travaillez dans la dimension de bloc.

Comprendre le fait qu'une ligne ou une colonne peut s'exécuter dans différentes directions physiques est utile pour comprendre certaines terminologies utilisées pour Grid et Flexbox. Nous ne faisons pas référence à «gauche et droite» ou «haut et bas» dans Flexbox et la grille, car nous ne faisons aucune hypothèse quant au mode d'écriture de notre document. Tout le CSS devient de plus en plus conscient du mode d'écriture; Si vous êtes intéressé par d'autres propriétés et valeurs implémentées pour que le reste du CSS se comporte de la même manière, lisez mon article sur Propriétés et valeurs logiques .

En résumé, rappelez-vous que: [19659050] flex-direction: ligne

• axe principal = dimension en ligne
• principal-début sera où les phrases commencent dans ce mode d'écriture
• axe croisé = dimension de bloc

Alignement initial

D'autres choses se produisent lorsque nous postuler afficher: flex . Un alignement initial arrive. Dans un prochain article de cette série, nous regarderons bien l'alignement; cependant, dans notre exploration de display: flex nous devrions regarder les valeurs initiales qui sont appliquées

Note : Il est à noter que pendant que ces propriétés d'alignement a commencé la vie dans la spécification Flexbox, la spécification Box Alignment remplacera finalement celles définies dans la spécification Flexbox, comme expliqué dans la spécification Flexbox .

Alignement de l'axe principal

La ​​valeur initiale de ] justify-content est réglé sur flex-start . C'est comme si notre CSS était:

 .container {
    affichage: flex;
    justify-content: flex-start;
}

C'est la raison pour laquelle nos éléments flexibles s'alignent sur le bord de départ du conteneur flexible. C'est aussi la raison pour laquelle quand nous mettons row-reverse ils basculent vers le bord d'extrémité car ce bord devient alors le début de l'axe principal.

Quand vous voyez une propriété d'alignement commençant par justifier- alors il s'applique à l'axe principal dans Flexbox. Donc justify-content effectue l'alignement de l'axe principal et aligne nos items au début.

Les autres valeurs possibles pour flex-direction sont:

• flex-end
• ] centre
• space-around
• espace-entre
• espace-uniformément (ajouté dans Box Alignment)

Ces valeurs concernent la distribution de l'espace disponible dans le conteneur flexible. C'est pourquoi les objets sont déplacés ou espacés. Si vous ajoutez justify-content: space-between tout espace disponible est partagé entre les éléments. Cependant, cela ne peut arriver que s'il y a de l'espace libre pour commencer. Si vous aviez un conteneur flexible bien serré (sans espace supplémentaire après que tous les articles aient été disposés), alors justify-content ne ferait rien du tout.

Vous pouvez le voir si vous changez de flex-direction à colonne . Sans une hauteur sur le conteneur flex, il n'y a pas d'espace libre, donc régler justify-content: space-between n'aboutira à rien. Si vous ajoutez une hauteur et faites en sorte que le conteneur soit plus grand que nécessaire pour afficher les éléments, alors la propriété a un effet:

Voir le stylo Smashing Flexbox Series 1: colonne avec une hauteur par Rachel Andrew ( @rachelandrew ) le CodePen .

Alignement d'axe croisé

Les articles sont également alignés sur l'axe croisé avec un conteneur flex simple de ligne; l'alignement que nous effectuons consiste à aligner les boîtes les unes par rapport aux autres dans la ligne. Dans l'exemple suivant, une de nos boîtes contient plus de contenu que toutes les autres. Quelque chose dit aux autres cases de s'étirer à la même hauteur. Quelque chose est la propriété align-items qui a une valeur initiale de stretch :

Voir le Pen Guide de mise en page Smashing: clearfix par Rachel Andrew ( @rachelandrew ) le CodePen .

Quand vous voyez une propriété d'alignement qui commence par align- et que vous êtes en flexbox, alors vous avez affaire à align-axis axis, et align-items aligne les éléments dans la ligne flexible. Les autres valeurs possibles sont:

• flex-start
• flex-end
• center
• référence

Si vous ne voulez pas que les boîtes s'étendent toutes jusqu'à la hauteur de la plus grande, ] align-self: flex-start les amènera tous à s'aligner sur le bord de début de l'axe croisé.

Voir le stylo Smashing Flexbox Series 1: align-items: flex-start par Rachel Andrew ( @rachelandrew ) le CodePen .

Valeurs initiales pour les éléments Flex

Enfin, les éléments flex eux-mêmes ont aussi des valeurs initiales, ils sont définis à:

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

Cela signifie que nos items ne se développeront pas par défaut pour remplir l'espace disponible sur l'axe principal. Si flex-grow était réglé sur une valeur positive, cela provoquerait la croissance des objets et l'occupation de tout espace disponible.

Les éléments peuvent rétrécir, cependant, flex-shrink ] est réglé à la valeur positive de 1 . Cela signifie que si nous avons un conteneur flexible très étroit, les objets seront aussi petits qu'ils le peuvent avant qu'un débordement ne se produise. C'est un comportement sensé; en général, nous voulons que les choses restent à l'intérieur de leurs boîtes et ne débordent pas s'il y a de l'espace pour les afficher.

Pour obtenir la meilleure mise en page par défaut, flex-basis est réglé sur ] auto . Nous verrons ce que cela signifie dans un prochain article de cette série, mais la plupart du temps, vous pouvez penser à auto comme "assez grand pour s'adapter au contenu". Ce que vous verrez se produire, quand vous avez des éléments flexibles qui remplissent le conteneur, et l'un de ces éléments a une plus grande quantité de contenu que les autres, l'objet plus grand aura plus d'espace.

Voir le Pen Smashing Flexbox Series 1: valeurs initiales d'éléments flex par Rachel Andrew ( @rachelandrew ) le CodePen .

C'est la flexibilité de Flexbox en action. Avec un flex-basis d'auto et aucune dimension appliquée aux éléments, les éléments flex ont une taille de base de la taille max-content . Ce serait la taille qu'ils auraient si ils s'étiraient et ne faisait aucun emballage. Ensuite, l'espace est retiré de chaque élément proportionnellement, détaillé dans la note suivante dans la spécification de flexbox .

"Note: Le facteur de rétrécissement flex est multiplié par la taille de base flexible lors de la distribution d'espace négatif. Ceci distribue l'espace négatif proportionnellement à la capacité de rétrécissement de l'article, de sorte que, par exemple, un petit objet ne rétrécit pas à zéro avant qu'un objet plus grand ait été sensiblement réduit. "

Le plus grand objet a moins d'espace enlevé et ainsi nous obtenons la disposition finale. Vous pouvez comparer les deux captures d'écran ci-dessous, toutes deux prises en utilisant l'exemple ci-dessus. Cependant, dans la première capture d'écran, la troisième boîte a une plus petite quantité de contenu, et donc nos colonnes ont une distribution d'espace plus égale.

Flexbox nous aide à obtenir un résultat final raisonnable, sans aucune autre contribution de la part de la personne qui écrit le CSS. Plutôt que de réduire l'espace uniformément et de finir avec un objet très grand avec quelques mots sur chaque ligne, il attribue à cet objet plus d'espace pour s'étendre. Dans ce genre de comportement est la clé des cas d'utilisation réels pour Flexbox. Flexbox est à son meilleur lorsqu'il est utilisé pour poser des ensembles de choses – le long d'un axe – d'une manière flexible et sensible au contenu. J'aborde un peu les détails ici, mais nous examinerons ces algorithmes plus tard dans cette série.

Résumé

Dans cet article, j'ai pris les valeurs initiales de Flexbox, afin pour expliquer ce qui se passe réellement quand vous dites display: flex . C'est une quantité surprenante une fois que vous commencez à le déballer, et ces propriétés contiennent de nombreuses caractéristiques clés des mises en page flexibles.

Les mises en page Flex sont flexibles: elles essayent de faire de bons choix par défaut. pour obtenir la meilleure lisibilité. Les mises en page Flex prennent en compte le mode d'écriture: les directions des lignes et des colonnes se rapportent au mode d'écriture utilisé. Les mises en page Flex permettent d'aligner les éléments en tant que groupe sur l'axe principal, en choisissant comment l'espace est distribué. Ils permettent l'alignement des éléments dans leur ligne de flexion, déplaçant les éléments sur l'axe transversal les uns par rapport aux autres. Il est important de noter que les mises en page flexibles comprennent la taille de votre contenu et essaient de prendre les bonnes décisions de base pour l'afficher. Dans les prochains articles, nous explorerons ces domaines de manière plus approfondie, et nous examinerons plus précisément quand et pourquoi nous pourrions choisir d'utiliser Flexbox.

(il)