Un outil interactif pour comprendre le positionnement Flexbox en CSS et expérimenter ses propriétés.
Un playground pour CSS FlexBox.
Le guide ultime pour comprendre CSS Flexbox selon moi (et j'en ai lu un paquet). C'est en anglais et relativement long, mais tout y est, mêmes les nouveautés comme la propriété gap ou les subtilités comme margin: auto.
J'ai découvert 2 ou 3 trucs que je ne connaissais pas alors que je suis un très gros utilisateur de Flexbox.
Les deux sont complémentaires !
Un tuto animé pour apprendre/comprendre Flexbox.
Un moyen d'accomplir un layout à la Masonry avec uniquement du CSS (principalement Flexbox et :nth-child()). C'est très bien pensé malgré les quelques contraintes.
Le plus gros souci pour moi c'est que si un élément est beaucoup plus haut que les autres, les blocs ne s'adapteront pas pour autant et l'ordre de lecture s'en trouvera impacté. Mais pour une grande part des cas, c'est suffisant.
Un petit site qui montre comment réaliser certains layouts communs avec flexbox.
Une astuce très importante à connaître pour résoudre un bug dans IE 11 avec flexbox.
Une tuto flexbox avec des animations tiptop !
Encore un guide illustré pour flexbox.
tl;dr
Attention quand vous faites une modale centrée horizontalement et verticalement avec Flexbox. Si le contenu de la modale est plus grand que le container, le centrage va tronquer le contenu.
L'astuce est d'appliquer ce CSS sur les flex items :
.your-flex-items {
margin-top: auto;
margin-bottom: auto;
}En principe, un simple margin: auto devrait fonctionner mais ça a causé des bugs avec IE chez moi. D'ailleurs pour que ça fonctionne correctement avec IE (voir les commentaires en dessous du post), il faut appliquer align-items: flex-start au lieu de center sur le container.
Les Media Queries ne sont plus la seule solution pour rendre un site responsive. Flexbox et Grid intègrent déjà pas mal d'options dans ce sens.
Les Grid CSS et Flexbox très bien illustrés.
Tout ce qu'il faut savoir sur Flexbox ! Il y a des outils pédagogiques, des showcases, des cheat-sheets, etc.
Encore une cheat sheet Flexbox. Très joliment réalisée :)
Un système de grid CSS ultra-simple qui utilise la puissance de flexbox. Et aussi un logo avec des zizis.
Si vous avez des soucis avec le ratio de vos images lorsqu'elles sont des flex-items.