CSS Flexbox est un module de positionnement à la mode, mais malheureusement encore parfois mal maîtrisé parmi les développeurs web.
Voici quelques références pour garder sous le coude la syntaxe Flexbox et bien maîtriser son usage :
- CSS Flexbox Layout Guide par CSS Tricks
- FLEX: A simple visual cheatsheet for flexbox par Malven
Ces cheatsheets comprennent en général :
- 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
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 pour ce pense bête...
ça vas m'aider dans ma formation.
@Ethos , @Polynesia : merci à vous pour ce genre de retours motivants :)
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 ;)
@newick : ah bizarre. Chez moi c'est ok sur osX avec adobe reader. Tu as essayé avec autre chose que Firefox ?
Merci , merci , merci !!!
@Raphael : ça marche nickel depuis Reader. Je pensais pas que ça réagissait différemment, merci de l'info ;)
Super pratique ! J'en aurai très prochainement besoin, merci :)
Merci Raphaël ! :-)
J'espère qu'il nous dépannera tous un jour :D
Merci, je découvre flexbox et le positionnement est vraiment plus simple avec ;-)
Excellent ! Grand merci à Raphaël, comme toujours une référence, le maître Po des petits scarabées comme moi
Merci, je débarque un peu complètement avec flexbox, c'est bien supporté par les navigateurs récents ?
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 ?
Oui car les vieilles versions d'IE ne représentent plus une part assez significative.
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... :)
Une guerre plus tard, mais quand même, merci beaucoup, ça sert toujours ;-)