Le pouvoir pédagogique du gif, une nouvelle fois démontré. Vous voulez comprendre les principes de base de flexbox, comment utiliser ses principales propriétés et ne plus paniquer en voyant du flex indomptable partout ? Alors prenez 5 minutes pour lire un article avec du flex en gif.

Je viens de débuter un projet, où je m’ocupe de l’intégration, et qui utilise la toute toute dernière version de bootstrap (version 4 alpha6), intégralement en flexbox. Gasp. L’intégration est un monde assez neuf pour moi, et je n’avais jusqu’ici qu’une vision superficielle de flexbox. Et voilà que j’ai à me coltiner du flex dans les moindres recoins. Panique.

Heureusement, un bon samaritain (Scott Domes) a eu la brillante idée d’expliquer flexbox avec des bons gros gifs colorés.

Grâce à lui, display: flex, flex-direction: column, justify-content: space-betweenou align-items: stretch ne seront plus du finlandais pour vous.

Source :How Flexbox works  — explained with big, colorful, animated gifs

Edit 06/03/17 : Une suite est parue, toujours avec sa palanquée de gifs ! Even more about how Flexbox works. Plongée dans les propriétés flex-basis, flex-grow, flex-shrink, flex