Flexbox

La dernière version de la spécification CSS Flexible Box Layout Module de 2017 est en Candidate Recommendation. Sous ce statut, les choses peuvent encore changer cf. la version de 2012 qui était déjà en Candidate Recommendation.

Par ici vous pouvez lire un petit récapitulatif de l'histoire du modèle de boîtes flexibles et constater que plus de 10 années sont passées depuis les premières inspirations de XUL.

Cela dit l'engouement est tel que j'ai quand même décidé de regarder comment ça marche et ça vaut le coup parce que ce nouveau flex layout est un game changer :)

Voici mes notes, à mes risques et périls donc mais le support est plutôt bon :)

Mise en forme flex

Le module CSS Flexible Box Layout Module permet d'agir facilement sur la distribution de l'espace et l'alignement. Le contenu d'un conteneur flexible peut s'adapter à l'espace disponible.

Il y a 2 éléments importants : le conteneur et ses enfants de premier niveau.

Le conteneur devient un conteneur flexible quand sa propriété display prend la valeur flex ou inline-flex.

Les enfants de premier niveau d'un conteneur flexible deviennent automatiquement des items flex.

Un conteneur devenu flexible établit un contexte de formatage flex dans lequel la mise en forme flex est utilisée à la place de la mise en forme bloc.

Avec la mise en forme flex, on règle des points épineux de la mise en forme bloc, notamment au niveau de l'alignement vertical :

1. il n'y a pas de marges de fusion entre le conteneur flexible et ses enfants, ni entre les items flex. Je pense que c'est une erreur dans le design de mise en forme bloc et c'est aussi l'avis de Bert Bos et de Håkon Wium Lie qui ont évoqué ce point lors de CSS Day 2017

2. on oublie aussi les subtilités du formatage vertical de la mise en forme bloc pour les éléments conteneurs avec height: auto; dont la hauteur calculée change en fonction de la présence des propriétés padding ou border.

3. margin-top et margin-bottom avec la valeur auto ne sont pas évalués à 0 comme dans la mise en forme bloc

Les lignes flex

Dans un conteneur flex, les items flex sont agencés et alignés à l'intérieur de lignes flex qui représentent des conteneurs imaginaires. Personnellement, j'y pense un peu comme les boîtes en ligne "imaginaires" générées par la hauteur de font-size et line-height.

Un conteneur flex peut avoir une seule ligne ou plusieurs en fonction de la valeur de la propriété flex-wrap.

La propriété align-content ne fonctionne que dans les cas où il y a plusieurs lignes flex.

Flexibilité

La propriété raccourcie flex permet de paramétrer la flexibilité des items flex en spécifiant :

1. leur facteur de grossissement (flex grow factor)
2. leur facteur de rétrécissement (flex shrink factor)
3. leur taille initiale (flex basis)

flex basis permet de définir la taille idéale d'un item flex avant que l'espace disponible ne soit distribué en fonction des facteurs flex.

S'il y a de l'espace en trop, le facteur de grossissement sera pris en compte pour remplir cet espace.

S'il n'y a pas assez d'espace pour faire tenir tous les éléments à leur taille idéale (la spécification parle d'espace disponible négatif), le facteur de rétrécissement sera pris en compte pour faire tenir les items dans l'espace disponible.

Les valeurs courantes sont récapitulées dans la spécification.

Les propriétés

Il y a un super tableau à la fin de la spécification. Pour râler un peu je dirais que certaines propriétés sont mal nommées :p

Schéma Flexbox

Et voici mon super schéma qui me sert de mémorandum. Vous pouvez cliquer dessus pour l'agrandir si vous avez un grand viewport :D

Pour finir

Je trouve cette spécification bien écrite et facile à lire. La mise en forme flex règle beaucoup de problèmes relatifs à l'alignement vertical et ça c'est vraiment génial.

C'est dommage que ça arrive si tard à un moment où je n'écris plus beaucoup de CSS, ça aurait tellement facilité les choses il y a 10 ans :D