Un guide complet sur la commande et la commande de Flexbox

Le module de présentation de la flexbox nous permet de disposer les éléments flexibles dans n'importe quel ordre et dans n'importe quelle direction. En fait, commander avec Flexbox est plus facile que de commander avec des flottants ou une grille CSS, même si vous ne le pensiez pas au début. Comme flexbox est un modèle de mise en page unidimensionnel, contrairement à la grille CSS qui est bidimensionnelle, il suffit de faire attention à une direction. Les règles sont également clairement définies par le W3C, vous n’avez donc pas à vous occuper du fouillis habituel des flottants et des correctifs..

En lisant ce guide, vous apprendrez à utiliser les propriétés de flexbox suivantes à des fins de commande:

• flex direction
• flex-wrap
• flex-flow
• ordre

Commande Vs. Réordonner

Quand on parle de la commande de boîtes flexibles, nous devons faire clairement la différence entre commande et réorganiser. 

Qu'est-ce que la commande?

Lorsque nous configurons une mise en page flexbox, nous devons d’abord définir la source ordre, ce qui signifie que nous devons décider comment les axes du conteneur Flex sont positionnés. J'ai décrit en détail le fonctionnement des axes de flexbox dans mon guide sur l'alignement de flexbox..

En bref, chaque conteneur flexible a deux axes: l’axe principal et l’axe transversal. L'axe principal aura l'une des quatre directions, et l'axe transversal sera toujours perpendiculaire à celui-ci:

1. de gauche à droite
2. de droite à gauche
3. de haut en bas
4. de bas en haut

L'axe transversal est toujours perpendiculaire à l'axe principal. 

Nous mettons en place l’axe principal avec le flex direction propriété, nous décidons ensuite comment les éléments flexibles s’enroulent, en utilisant la flex-wrap propriété. Ces deux propriétés déterminent la manière dont le navigateur agencera les éléments dans le conteneur flex..

Alors, quelle est la réorganisation?

Flexbox nous permet également de manipuler efficacement l'ordre source par défaut réorganiser, avec l'aide du ordre propriété. La réorganisation signifie que nous modifions le rendu visuel des éléments, tandis que l'ordre des sources reste intact.. 

Si nous utilisons les fonctionnalités de réorganisation de flexbox, il ne sera pas nécessaire de modifier la structure du document HTML uniquement pour des raisons de présentation visuelle. Ainsi, les utilisateurs de lecteurs d’écran (et les moteurs de recherche) peuvent obtenir le contenu de manière structurée de manière logique (par exemple, la barre latérale n’aura pas priorité sur le contenu principal).. 

Commande Flexbox

La commande de Flexbox se passe avec les propriétés flex-direction et flex-wrap. Flex-direction spécifie la direction de l'axe principal. Il peut prendre les valeurs suivantes:

1. rangée (par défaut) axe principal: de gauche à droite
2. ligne inverse axe principal: droite à gauche
3. colonne axe principal: de haut en bas
4. inversion de colonne axe principal: de bas en haut

Flex-wrap définit si les éléments flexibles sont disposés sur une seule ligne ou s'ils sont placés sur plusieurs lignes. Il contrôle également la direction de l'axe transversal. Il peut avoir trois valeurs:

1. maintenant (valeur par défaut) affiche les éléments flexibles sur une seule ligne; l'axe transversal est dans la position par défaut
2. emballage dispose les éléments flexibles sur plusieurs lignes; l'axe transversal est dans la position par défaut
3. wrap-reverse dispose les éléments flexibles sur plusieurs lignes; l'axe transversal est inversé

La position par défaut de l'axe transversal est:

• de haut en bas en cas de rangée et ligne inverse
• de gauche à droite en cas de colonne et inversion de colonne

Dans mon article précédent sur l'alignement de la flexbox, vous pouvez trouver quatre exemples détaillés (avec des démonstrations) sur la manière de configurer l'axe principal dans quatre directions différentes à l'aide de flex direction. Cependant, lorsqu’on discute de la commande de flexbox, je pense qu’il est plus important de savoir comment utiliser le flex direction et flex-wrap Propriétés ensemble pour atteindre l'ordre source que nous recherchons.

Un exemple de code rapide

Nous allons utiliser un exemple de code simple pour voir comment fonctionne la commande de flexbox. Le code HTML ici se compose de quelques divs:

 
1
 
2
 
3
 
4
 
5
 
6
 
7
 
8
 
9
 
 

le .récipient div sera le conteneur flex et les divs avec le .article la classe sera les éléments flexibles. Nous allons utiliser (presque) le même CSS dans tous les exemples, juste le flex direction et flex-wrap les propriétés vont changer. Voici à quoi ressemble notre CSS avec le rangée et emballage valeurs:

html background: # fff7f6;  .container display: flex; direction de flexion: rangée; enveloppe souple: enveloppe;  .item font-size: 2rem; hauteur de ligne: 1; text-align: center; rembourrage: 3rem; fond: mistyrose; bordure: tomate solide 3px; couleur: tomate; marge: 6px; 

Voici le même exemple dans une démo de CodePen:

Commander avec Rangée et Colonne

Maintenant, nous avons atteint la partie vraiment intéressante! Il n’est pas trop difficile de comprendre l’ordre des boîtes flexibles en théorie, mais son utilisation dans la pratique peut certainement être un défi. Cela se produit car il est difficile de voir comment différentes variations de flex direction et flex-wrap comparer les uns aux autres.

Dans le stylo intégré ci-dessous, vous pouvez voir comment le flex direction: rangée et direction de flexion: colonne mises en page travaillent ensemble avec différentes valeurs de la flex-wrap propriété. Utilisez les contrôles de formulaire pour voir différentes combinaisons.

Comme vous pouvez le voir, quand flex direction est rangée, les articles flexibles sont disposés horizontalement, de gauche à droite. Quand on utilise wrap-reverse au lieu de emballage, flexbox commence à présenter les éléments de la bas, au lieu de Haut. Cela se produit parce que wrap-reverse inverse la direction de l'axe transversal.

Quand flex direction est colonne, les articles sont disposés verticalement, de haut en bas. Et quand on utilise wrap-reverse au lieu de emballage, flexbox commence à présenter les éléments de la droite (maintenant c’est le point de départ de l’axe transversal), au lieu de partir de la gauche.

Commander avec ligne inverse et inversion de colonne

Voyons maintenant comment flexbox affiche les éléments lorsque flex-direction est ligne inverse et inversion de colonne.

Comme vous pouvez le voir dans la démo ci-dessus, flexbox commence à agencer les éléments à partir du début de l'axe principal dans les deux cas, exactement comme avant. L'axe principal du ligne inverse la mise en page va de de droite à gauche, alors flexbox commence à présenter les éléments à partir de la droite. Et, l'axe principal de la inversion de colonne la mise en page va de de bas en haut, de sorte que les articles commencent à couler à partir du bas du conteneur Flex.

Quand on utilise enveloppe souple: enveloppe, flexbox commence à envelopper les éléments de la Haut quand flex direction est ligne inverse et du la gauche quand il est inversion de colonne, comme ce sont les points de départ de l'axe transversal dans les cas respectifs.

Lorsque nous inversons le sens d’emballage à flex-wrap: wrap-reverse, l'axe transversal ira dans la direction opposée. Il indiquera de de bas en haut quand flex direction est ligne inverse, et de de droite à gauche quand il est inversion de colonne.

Accélérer les choses avec le flex-flow Sténographie

CSS a également un raccourci pour la flex direction et flex-wrap Propriétés. C'est ce qu'on appelle flex-flow. Pour l'utiliser, nous devons lister les deux propriétés l'une après l'autre de la manière suivante:

.conteneur-1 flex-flow: wrapping de ligne;  .container-2 flex-flow: colonne-inverse wrap-reverse; 

Réorganisation de la Flexbox

Il est temps de regarder les choses un peu différemment. 

La propriété order change la commande par défaut des éléments flex que nous définissons avec flex direction et flex-flow. Cela n'affecte que le rendu visuel des éléments et n'affecte donc pas la façon dont les lecteurs d'écran et les autres agents utilisateurs non CSS lisent le code source..

Contrairement aux propriétés mentionnées précédemment, nous utilisons ordre sur le flex articles, au lieu du flex récipient. Il peut prendre n'importe quelle valeur entière et sa valeur par défaut est 0.

L'exemple suivant se déplace .point 3 jusqu'au point de départ de l'axe principal. Tous les éléments ayant la valeur par défaut 0, il suffit d’utiliser le ordre: -1 règle pour en faire le premier élément du conteneur:

.item-3 order: -1; 

Vous remarquerez que nous pouvons utiliser la même logique pour déplacer .point 3 à la fin de l'axe principal. Nous devons seulement définir un positif ordre valeur pour cela.

Bien sûr, nous pouvons réorganiser autant de ces éléments flexibles que nous le souhaitons (tout en gardant à l'esprit que tout réorganiser n'est probablement pas la décision la plus favorable à l'accessibilité). le ordre les propriétés des différents éléments flex sont toujours relatives les unes aux autres. Ci-dessous, vous pouvez voir comment réorganiser plusieurs éléments dans le conteneur Flex..

.item-3 order: -1;  .item-4 order: -2;  .item-5 order: 2;  .item-7 order: 1; 

Commande et accessibilité

La chose la plus importante à comprendre à propos de tout cela est que le ordre propriété n'affecte pas les ordres de peinture, de parole et de navigation séquentiels. Cela signifie que lorsque nous modifions l'ordre de nos éléments flexibles, les utilisateurs de supports non visuels ne subiront pas les modifications. Par exemple, les personnes qui utilisent la navigation au clavier continueront à naviguer dans les liens dans l’ordre source d'origine..

Ce comportement de boîte souple peut s'avérer utile dans certains cas. Par exemple, il est possible de rendre la «disposition du Saint-Graal» accessible à l'aide de la commande Flexbox. La mise en page du Saint-Graal est une mise en page de blog populaire avec un en-tête, un pied de page et deux barres latérales: une à gauche et une à droite du contenu principal.. 

Dans cette présentation, nous mettons habituellement la barre latérale gauche avant le contenu principal dans le code HTML. Toutefois, du point de vue de l'accessibilité, les utilisateurs de technologies d'assistance devraient en premier lieu rencontrer le contenu principal. Flexbox est parfait pour cela. Nous pouvons placer le contenu principal avant les deux barres latérales dans notre balisage. Ensuite, il suffit de placer la barre latérale et le contenu principal dans la bonne position en utilisant le bouton ordre propriété:

.sidebar-left order: 1;  article order: 2;  .sidebar-right order: 3; 

Flexbox & Modes d'écriture

Tout ce qui est dit dans ce tutoriel s’applique au mode d’écriture LTR (de gauche à droite). Les axes de la Flexbox suivent en réalité la direction d'écriture du document, laquelle peut être configurée avec les propriétés direction et mode d'écriture. C’est pourquoi, en mode d’écriture LTR, l’axe principal va de gauche à droite lorsque flex direction est rangée. En mode d'écriture RTL, il fonctionne dans le sens opposé, de droite à gauche, et tout le reste change en conséquence..

C'est un (Flex) Wrap!

Ce tutoriel était la deuxième partie de ma série de flexbox. Assurez-vous de lire la première partie sur l'alignement de la boîte flexible pour apprendre à aligner les éléments flexibles le long des axes principal et transversal. Si vous souhaitez en savoir plus sur la commande de flexbox, MDN propose également un article très informatif sur le sujet.. 

Apprendre encore plus