NFA016 : les cascading style sheets (CSS) : Flex

O. Pons, S. Rosmorduc

Conservatoire National des Arts & Métiers

Les flex

• Groupes « flexibles »
• dans tous les navigateurs récents (http://caniuse.com)
• permet de faire facilement, par exemple, des éléments de même hauteur
• Doc et démos sympathiques : css-tricks.com

Principe

• On marque la boîte parente en display : flex.
• Les boîtes filles sont organisée le long d'un axe principal (horizontal ou vertical)
• Dans l'autre dimension, elles auront par défaut la même taille : pour un axe horizontal, on aura des boîtes disposées côte à côte et de même hauteur ;
• on peut demander à répartir sur plusieurs lignes (ou colonnes) ;
• nombreux réglages possibles (par exemple : alignement).

Exemple

Cases de même hauteur sur une seule ligne

• L'élément parent a la propriété display: flex
• par défaut, il est organisé en lignes
• il fait par défaut une seule ligne
• Ses enfants se partageront l'espace selon la valeur de leur propriété flow
• dans l'autre direction (ici la verticale), ils auront par défaut la même hauteur

Autre exemple

Ici, la valeur de flex n'est pas précisée pour les enfants ; elle équivaut à flex: 0 1 auto;.

La propriété flex

Trois paramètres: flex-grow, flex-shrink et flex-basis

grow

capacité de l'élément à utiliser de l'espace libre. 0: l'élément ne grossit pas. Un élément avec grow=2 grossit deux fois plus qu'un élément à 1.

shrink

capacité de l'élément à rétrécir ; fonctionne comme grow.

basis

fixe la taille de départ (à partir de laquelle on essaie de grossir ou de rétrécir). Peut être une dimension (comme 3cm ou 2em), content, qui utilise le contenu de l'élément lui-même pour calculer sa taille, ou auto, qui réparti l'espace total disponible dans cette alignement (c'est à dire celui laissé par tous les éléments).

Premier exemple

Ci dessous, on a trois éléments en flex : 1 1 auto.

On remarque que:

• à cause de auto, les éléments ont une taille de base qui dépend de la largeur « naturelle » de leur contenu

auto et élément large

Ici, nous sommes toujours sur des flex à 1 1 auto, mais le premier élément est trop long pour que tout tienne sur une ligne.

Flex doit réduire les éléments (en utilisant la propriété shrink qui est à 1). L'espace assigné par défaut dépend de la largeur « naturelle » de l'élément, ainsi que de sa capacité à être réduit. Observez le premier et le second élément en particulier.

Basis à auto

avec une basis de auto, les éléments se partagent l'espace restant disponible: on retire la taille naturelle des éléments de l'espace disponible, et on partage équitablement (en fonction de grow) l'espace qui reste.

Basis à 0em

avec une basis de 0em, les éléments se partagent équitablement l'espace total (les colonnes ont alors toutes la même largeur).

Comparez avec :

Basis fixée à un pourcentage

On peut aussi décrire basis avec un pourcentage. Ici, le troisième élément a une basis de 80%. Du coup, il ne reste plus beaucoup d'espace pour les autres.

Grow

grow permet de fixer comment l'espace disponible sera réparti. Un élément avec un grow de 4 récupèrera 4 fois plus d'espace disponible qu'un élément avec un grow de 1. Un élément avec un grow de 0 ne sera pas étendu.

Avec une basis de 0em, si l'élément central un un coefficient grow de 4, il prend 4 fois plus de place qu'un élément avec un grow à 1.

Même chose, mais avec basis=auto : s'il n'y a pas d'espace à répartir, c'est l'élément avec le plus de contenu qui sera le plus large. S'il y a de l'espace, il sera partagé selon la valeur de grow

Shrink à zéro

Si on place le shrink du premier élément à 0, il n'est plus capable de diminuer, et essaie d'être sur une seule ligne

Utilisation de flex-flow

Se place sur le parent ; permet

• des mises en page en ligne ou en colonne (row ou column)
• d'activer ou de désactiver la possibilité de mettre en page sur plusieurs couches (wrap ou nowrap)
• par défaut: row nowrap
• est un raccourci pour les deux propriétés flex-direction et flex-wrap.

Exemple : ici, les éléments sont tous en flex 1 1 auto, et flex-flow est row wrap. Le premier élément prend sa taille naturelle, qui est de la largeur de la page, et repousse les deux autres sur la ligne suivante.

Dans le cas présent, les éléments ont les mêmes caractéristiques ; c'est juste la taille du contenu de la première case qui déclenche la mise en page sur plusieurs rangées.

Quelques essais en jouant sur les paramètres

Usage de flex-direction : column ;

Dans le cas des colonnes, les éléments de la même colonne ont normalement une même largeur, et remplissent la colonne.

Contrairement à la largeur d'une ligne, la hauteur d'une colonne n'est pas bornées par les limites de l'écran.

L'utilisation de column wrap est beaucoup plus compliquée, et ne fonctionne bien que si les éléments ne sont pas trop larges.

Utilisation pour une mise en page complexe

Dans l'exemple qui suit, en-tête et pied de page prennent toute la largeur de l'écran ; le reste de la page est sur trois colonnes, sauf s'il y a moins de 30em d'espace disponible, auquel cas, les éléments se placent les uns en dessous des autres.

Autres propriétés

order

• Permet de modifier l'ordre des enfants d'un élément flex.
• intéressant en combinaison avec les media-queries pour présenter les éléments dans des ordres différents selon la taille des supports

justify-content, align-items, align-content, align-self

inline-flex