Flexbox Cheatsheet (pense-bête)

Outilcss

Publié par le (15943 lectures)

tableau bonnes pratiques responsive memento récapitulatif

CSS3 Flexbox est un module de positionnement à la mode, mais malheureusement encore parfois mal maîtrisé parmi les développeurs web.

La plupart des ressources, documents et cheat sheets récupérables sur Internet se contentent d'informations basiques, ce qui est bien entendu très pratique pour débuter ou apprendre les différentes propriétés.

Cependant, il manquait jusqu'à aujourd'hui un support plus technique, composé d'astuces concrètes et de bonnes pratiques en production.
Alsacréations vous propose sa Flexbox Cheatsheet au format PDF, que vous pouvez télécharger à l'adresse kiwi.gg/flexcheat (82 Ko) et qui rassemble les informations techniques nécessaires à un usage de Flexbox au quotidien.

Ce memento est composé des sections suivantes :

  • propriétés Flexbox applicables sur le parent (avec valeurs par défaut)
  • propriétés applicables sur les enfants
  • support des navigateurs (et version de spécification supportée)
  • liste des bugs navigateurs et contournements les plus courants
  • ordre de priorité des propriétés (voir cette présentation PDF)
  • quelques modèles classiques : objet "media", centrage multiple, grille mono-ligne avec et sans gouttières
  • les propriétés CSS qui ne s'appliquent pas sur les parents et les enfants flexbox
  • liens vers des ressources incontournables

N'hésitez pas à le télécharger, il est en usage libre (mentions d'Alsacréations recommandée) et à nous faire toute critique ou suggestion à propos de ce document.

Commentaires

Un grand Merci :-)
et au passage un respectueux merci à la communauté alsanaute pour les innombrables enseignements qui m'abreuvent depuis quelques mois...

Bien à vous :-)

Merci beaucoup pour toutes les informations que tu donnes sur les flexbox (devfest, alsacreation, ton livre). Je m'y suis mis et depuis pour paraphraser Steve Jobs, c'est une révolution.

Merci beaucoup pour cette ressource supplémentaire !

Par contre petit bug à l'impression sur l'interlettrage trop petit et j'ai des caractères spéciaux qui s'affichent. (Firefox sous osX)

Encore beau boulot ;)

Le support sur IE semble complètement incomplet, vous l'utilisez déjà régulièrement sur des projets en production et de manière intensif ?

D'acc, dans ma boite actuelle, les utilisateurs d'IE représentent encore 10% de l'ensemble des visiteurs, il existe des hacks et contournements je suppose. Quoi qu'il en soit, merci pour l'article et le travail effectué sur cette fiche !

10% pour quelles versions ? Si c'est majoritairement IE11, c'est probable (bien que supérieur à la moyenne) et cela n'empêche pas d'utiliser Flexbox. En France actuellement on tourne aux alentours de <1% pour IE8+IE9+IE10 cumulés.

Pour te répondre, il s'agit des utilisateurs IE toutes versions confondues. Par ta réponse, j'entends donc qu'utiliser flexbox est ok aujourd'hui. Je vais m'y mettre, j'ai l'impression d'avoir plusieurs trains de retards... :)

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.