Flexbox Cheatsheet (pense-bête)

Outil par (Intégrateur du Dimanche, Strasbourg)
Créé le (10986 lectures)
Tags : 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

Ethos a dit le

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

Bien à vous :-)

Polynesia a dit le

Merci pour ce pense bête...

ça vas m'aider dans ma formation.

Raphael a dit le

@Ethos , @Polynesia : merci à vous pour ce genre de retours motivants :)

cdkey22 a dit le

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.

newick a dit le

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 ;)

Raphael a dit le

@newick : ah bizarre. Chez moi c'est ok sur osX avec adobe reader. Tu as essayé avec autre chose que Firefox ?

Rogh a dit le

Merci , merci , merci !!!

newick a dit le

@Raphael : ça marche nickel depuis Reader. Je pensais pas que ça réagissait différemment, merci de l'info ;)

Webyx a dit le

Super pratique ! J'en aurai très prochainement besoin, merci :)

spongebrain a dit le

Merci Raphaël ! :-)

Raphael a dit le

J'espère qu'il nous dépannera tous un jour :D

darkodeur a dit le

Merci, je découvre flexbox et le positionnement est vraiment plus simple avec ;-)

farang a dit le

Excellent ! Grand merci à Raphaël, comme toujours une référence, le maître Po des petits scarabées comme moi

MeMeN a dit le

Merci, je débarque un peu complètement avec flexbox, c'est bien supporté par les navigateurs récents ?

MeMeN a dit le

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 ?

dew a dit le

Oui car les vieilles versions d'IE ne représentent plus une part assez significative.

MeMeN a dit le

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 !

dew a dit le

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.

MeMeN a dit le

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.

Vous identifier (déjà inscrit)

Nouvel inscrit

Être inscrit sur Alsacréations vous permet de :

  • participer à la communauté
  • intervenir sur les actualités
  • créer des sujets sur le forum et y répondre
  • participer aux concours
  • vous inscrire à des événements tels que la KiwiParty
  • publier votre profil

Indiquez un e-mail valide pour recevoir votre mot de passe :

Votre adresse e-mail restera strictement confidentielle, ne sera ni divulguée à un tiers ni spammée.

Annonces par e-mail

Souhaitez-vous recevoir les newsletters officielles par e-mail ?   Fréquence d'envoi : tous les 3 à 6 mois, annulation possible à tout moment

En vous inscrivant, vous confirmez accepter les règles d'utilisation.

Retour à l'accueil