Comment bien utiliser les flex boxes ?
De quoi s'agit il ?
Il existe de nombreux tutos sur la question, je ne vais donc pas en créer un nouveau mais vous inviter à lire et écouter ceux que je trouve les plus pertinents. Mais avant tout, pour introduire cette notion de flexbox, je vous site un extrait de la présentation de Raphael pour Alsacréation :
"Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”.
Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont :
- Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé ou non,
- Alignements et centrages horizontaux et verticaux, justifiés, répartis,
- Réorganisation des éléments indépendamment de l’ordre du flux (DOM),
- Gestion des espaces disponibles (fluidité)."
Les liens utiles
Donc en premier lieu le tuto complet sur Alsacréation est ici : www.alsacreations.com/... (en français)
Maintenant que vous savez bien de quoi il s'agit, la même chose en vidéo pour des exemples concrets mais aussi des astuces complémentaire, comme par exemple l'utilisation de l'unité "vh" au lieu de "%" ou "px".
Ne manquez pas les explications de Wes Bos (en anglais) : flexbox.io
Enfin pour retrouver certains exemples une fois que vous maitriserez cet outil remarquable du css3, Css-Tricks vous permettra de retrouver rapidement tous les aspects de cette solution grâce à ce guide : css-tricks.com/...