Une explication interactive des FlexBox

Une présentation très didactique de FlexBox et Grid dans une perspective de design adaptatif

Flexbox décortiqué à travers 18 vidéos
CSS3 Flexbox est l'une des dernières révolutions des spécifications CSS et nous facilite la vie tous les jours. Pourtant, il est parfois taquin et peu intuitif, notamment lorsque l'on s'attaque au trio de propriétés flex-grow, flex-shrink et flex-basis.

L'un de nos membres actifs du forum, lionel_css3, va devenir votre meilleur ami puisqu'il vient de publier une Série de vidéos d'apprentissage de Flexbox sur sa chaîne Youtube.

Durant 4h30 et près d'une vingtaine de vidéos, Lionel consolide petit à petit les bases de cette spécification plus complexe qu'il n'y paraît.

Flex et Grid ont été conçues dans un monde où le RWD était déjà la norme. Ils permettent donc de ne pas faire systématiquement appel aux mediaqueries !

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.

Un article de fond sur les possibilités des FlexBox en CSS3. Long et avec beaucoup d'exemples.

Un tutoriel en anglais sur les FlexBox

Une référence en français sur les FlexBox

On peut faire plein de choses en CSS sans les FlexBox

Une liste des bugs Flexbox selon les navigateurs et des méthodes de contournement.

Un jeu pour apprendre à faire des flexbox. Très instructif !

Expérimentez les propriétés FlexBox !

Apprenez FlexBox en jouant ! Notre score : 100% !

Comprendre comment fonctionnent les CSS3 des flexbox

ptb/flexgrid is a next-generation web page layout framework based on flexbox: the CSS Flexible Box Layout Module. It uses the same responsive 12 column grid and CSS class names as Bootstrap.

Flexbox, une solution CSS3 élégante pour réorganiser le contenu d'une page avec beaucoup de précision et de liberté.