Bien maîtriser le display flex

Le FlexBox Layout a pour but de faciliter le positionnement des éléments entre eux. Une manière bien plus compréhensible et agréable à utiliser que l'ancienne méthode où il fallait jouer avec les propriétés float et clear.

L'idée principale derrière ça est de donner au parent/conteneur la possibilité de modifier le comportement des enfants/items pour remplir au mieux la place qu'ils ont à leur disposition et pouvoir rapidement et simplement modifier leur taille en fonction des devices.
Autre point très important c'est la possibilité de gérer des directions.

Avec le display Flex et le display Grid, les différentes propriétés qui s'appliquent se divisent en deux catégories, celles qui s'appliquent aux parents, et celles qui s'appliquent aux enfants .

Les propriétés appliquées au parent

Il faut définir avant toute chose un conteneur, ou un parent et appliquer flex à la propriété display.

La propriété Display

Il faut définir avant toute chose un conteneur, ou un parent et appliquer flex à la propriété display.
Petite parenthèse le fonctionnement de flex et inline-flex est identique. Le comportement est en fait identique à block / inline-block. A savoir que par défaut un conteneur flex prendra toute la largeur qu'il a sa disposition, comme un élément block ; mais à l'inverse inline-flex prendra uniquement la largeur dont il a besoin, comme un élément inline-block.

Cela mettra l'ensemble de ses enfants sur une seule ligne. Par défaut, la direction est row (ligne) est dans l'ordre standard

.parent {
    display: flex;
}

La propriété flex-direction

.parent {
    display: flex;

    flex-direction: row | row-reverse | column | column-reverse
}

Ici flex-direction peut prendre 4 valeurs, divisible en deux, row ou column. Row les éléments se placeront sur la même ligne, et column... dans la même colonne, enfin row-reverse et column-reverse vont inverser l'ordre des enfants, le premier deviendra le dernier et inversement

La propriété flex-wrap

Elle peut prendre 3 valeurs : wrap, wrap-reverse, nowrap

Par défaut les éléments vont tous se positionner sur la même ligne, c'est le comportement nowrap et peu importe la taille de votre conteneur
Si l'on souhaite pas forcer le rétrécissement des éléments et les faire passer à la ligne, il faudra appliquer la valeur wrap, et les éléments iront à la ligne de haut en bas.

Enfin si la propriété css wrap-reverse est appliquée, même comportement sauf que les éléments se positionneront de bas en haut, mais toujours de la gauche vers la droite.

.parent {
    display: flex;

    flex-wrap: wrap | wrap-reverse | nowrap
}

La propriété flex-flow

C'est une propriété pour les petits pressés, c'est en fait un raccourci entre les deux propriétés flex-direction et flex-wrap qui ensemble, vont définir le comportement général du contenu.

Les valeurs par défaut sont row et no wrap, le comportement de base.

.parent {
    display: flex;

    flex-flow: column wrap;
}

La propriété justify-content

Il est très facile de confondre align-items et justify-content. Ces deux propriétés ont le même, but aligner/centrer les éléments à l'intérieur.
La différence majeure est que justify-content va centrer ses enfants dans l'axe principal, l'axe déterminé par flex-direction.
Ainsi si nous avons un parent avec la propriété flex-direction à row et la propriété justify-content à center, les éléments à l'intérieur seront centrés de gauche à droite.
En revanche avec flex-direction qui vaut column, justify-content:center, va centrer les éléments de haut en bas.

Les différentes valeurs possibles :

  • flex-start : aligne les éléments au début (si display row à gauche, si display column en haut).
  • flex-end : aligne les éléments à la fin
  • center : centre les éléments
  • space-between : ça commence à se corser - premier élément au début, le dernier au fond, le reste des éléments est réparti de manière égale.
  • space-around : Les éléments sont répartis de manière égale sur la ligne avec un espace égal autour d'eux. Notez que visuellement, les espaces ne sont pas égaux, puisque tous les éléments ont un espace égal des deux côtés. Le premier élément aura une unité d'espace contre le bord du conteneur, mais deux unités d'espace entre l'article suivant car celui-ci a son propre espacement qui s'applique.
  • space-evenly : les éléments sont répartis pour faire en sorte qu'il y ai toujours le même espace entre eux, mais aussi avec le bord.
  • end : se base sur le sens de lecture, dans notre système occidentale de gauche à droite, end correspond donc à droite si flex-direction vaut row
  • start : se base aussi sur le sens de lecture, cette fois au début

La propriété align-items

Comme mentionné plus haut la propriété align-items va influer sur le comportement des enfants, mais perpendiculairement à ce que fais justify-content. Ici aussi plusieurs valeurs pour cette propriété :

  • stretch (default) : les éléments à l'intérieur vont s'étirer pour remplir leur conteneur. Attention donc si vous enfants directs sont des images.
  • flex-start/start : la différence entre ses différentes propriétés est tout aussi subtile que pour justify-content. Start se base sur le sens de lecture, alors que flex-start va bien se poser au début, c'est à dire que pour un élément en flex-direction: row, justify-content:flex-start placera les enfants en haut du conteneur.
  • flex-end/end idem mais dans le sens inverse je vais pas vous refaire le dessin. Je ne vais pas insulter votre intelligence
  • center le grand classique
  • baseline : l'alignement se fera par rapport à la hauteur de ligne plus précisément par rapport à la valeur align:baseline

La propriété align-content

Attention elle ne fonctionne que lorsque vous avez plusieurs lignes. Tout comme align-item elle agit sur l'axe perpendiculaire et positionnera donc l'ensemble de vos lignes en fonction de la valeur saisie.

  • stretch (default): Cela va étirer l'ensemble de vos éléments de manière égale, pour qu'ensemble ils remplissent votre conteneur.
  • flex-start / start : Les éléments sont placés au début de l'axe perpendiculaire déterminé par flex-direction. La différence entre flex-start et start et que flex-start va se basera sur le conteneur flex, et start se basera sur l'ordre de lecture
  • flex-end / end : Les éléments sont placés à la fin de l'axe perpendiculaire, avec flex-end vos éléments iront vont se positionner la fin de votre conteneur flex alors que end se basera sur le sens de lecture.
  • center: les éléments vont se centrer.
  • baseline: les éléments vont s'aligner en fonction de leur alignement sur la propriété align baseline.

Les propriétés appliquées aux enfants

Après avoir vu l'ensemble des propriétés applicable à conteneur en display flex, il est temps de voir ce que nous pouvons faire avec les enfants

La propriété order

Comme son nom peut le laisser sous entendre, vous allez pouvoir gérer l'ordre des éléments indépendamment de leur position dans le DOM. Cette propriété est particulièrement utile en responsive

.item {
  order: 5; /* valeur par défaut 0 */
}

La propriété flex-grow

Cela définit la capacité d'un élément à occuper de la place à l'intérieur de son conteneur. Cette propriété accepte une valeur sans unité(0, 1, 2...) qui sert de proportion. Elle dicte la quantité d'espace disponible à l'intérieur du conteneur que l'élément doit occuper.

Si tous les éléments ont la valeur 1, l'espace restant dans le conteneur sera distribué de manière égale à tous les enfants. Si l'un des enfants a une valeur de 2, il aura une double part d'espace restant et occupera donc deux fois plus de place que les autres (ou du moins il essaiera de le faire).

La propriété flex-shrink

Elle spécifie le "facteur de rétraction", qui détermine de combien l'élément flexible va se rétracter par rapport au reste des éléments dans le conteneur flex, lorsqu'il n'y a pas assez de place sur la rangée.

Lorsqu'il est omis, il a une valeur par défaut à 1 et le facteur de rétraction est multiplié par le flex-basis lors de la répartition de l'espace négatif.

La propriété flex-basis

Elle précise la taille initiale de l'élément flexible, avant que l'espace disponible ne soit réparti en fonction des facteurs de flexibilité (flex-grow et flex-shrink). Lorsqu'il est omis dans le raccourci flex que nous allons voir sa valeur spécifiée est la longueur zéro.

Une valeur flex-basis fixée à auto va fixer la taille de l'élément en fonction des propriétés largeur et hauteur déterminées (qui peuvent elle-même être à auto, au quel cas la taille de l'élément est déterminé en fonction de son contenu).

La propriété flex

C'est l'abréviation de "flex-grow", "flex-shrink" et "flex-basis" combinés. Les deuxième et troisième paramètres (flex-shrink et flex-basis) sont facultatifs. La valeur par défaut est 0 1 auto, mais si vous la définissez avec une seule valeur numérique, c'est comme 1 0.


.flex-item {

  /* ceci */
  flex: 1 100px;

  /* est identique et on laisse flex shrink de côté */
  flex-grow: 1;
  flex-basis: 100px;
}

Les valeurs les plus communes.

Si ce n'est pas encore très clair voici quelques exemples avec les valeurs les plus souvent utilisés.

flex: 0 auto;

C'est la même chose que flex: initial et le raccourci de la valeur par défaut, flex: 0 1 auto. Il taille les éléments en se basant sur leur propriété width et height.

Il fait en sorte que les éléments restent inflexibles même si il reste de l'espace restant, mais rétrécissent à leur minimum quand il n'y a plus assez d'espace. les marges auto peuvent être utilisés pour aligner des éléments flex sur l'axe principal.

flex: auto;

C'est l'équivalent à flex: 1 1 auto. Attention ce n'est pas la valeur par défaut. Il va se baser sur la propriété width et height, mais les rendra complètement flexibles et prendront toute la place restante sur l'axe principal.

Si tous les éléments ont soit flex: auto, flex: initial, ou flex: none, l'espace restant sera attribué à l'élément avec flex: auto.

flex: none

C'est l'équivalent à flex: 0 0 auto. il va tailler les éléments en fonction de width et height encore mais resteront complètement inflexibles.
C'est donc identique à flex: initial. Sauf que les éléments ne seront pas autorisés à rétrécir.

La propriété align-self

De base les éléments vont se positionner avec la propriété align-items du parent. Mais si vous souhaitez changer le positionnement de l'un des éléments c'est possible avec la propriété align-self qui peut prendre les mêmes propriétés

Conclusion

J'espère que vous maîtrisez un peu mieux le layout avec display: flex. Et si vous ou votre entreprise recherchez un développeur web sur Toulouse ou ses environs n'hésitez pas à me contacter.

Created by potrace 1.16, written by Peter Selinger 2001-2019