Module CSS3 Flexbox : Flex for Fantasy

Flexbox We Can Do It

La mise en page des sites web en colonnes est passée par les affres de l’élément HTML <table> qui a laissé la place à la propriété CSS float, en passant très brièvement par display:table. Aujourd’hui, C’est au tour du module CSS Flexbox de faire parler de lui en permettant pratiquement tout ce que l’on peut imaginer en terme de mise en page fluide et flexible. Voici un florilège de ressources en français et en anglais pour découvrir ce module et apprendre à l’utiliser. Au menu, près de 30 liens pour se faire la main. 

De la théorie…

Des tutoriels pour comprendre le module Flexbox.

à la pratique

Les trucs qu’on voulait faire en CSS mais qu’on pouvait pas et maintenant qu’on peut ?

en passant par les terrains de jeux

Des générateurs de code en veux-tu en voilà !

  • The Playground — Un générateur de propriétés Flexbox aussi simple qu’efficace. Ajoute les préfixes propriétaires sur demande.
  • Flexbox Playground — Terrain de jeu pour tester Flexbox. Plus complet, mais plus brouillon que le précédent.
  • Fibonacci Flexbox Composer — Cliquez pour créer des div mises en forme avec Flexbox.
  • Flexbox in 5 minutes — Visite guidée interactive de cette nouvelle fonctionnalité.

et les grilles CSS

Bon, c’est pas tout mais c’est quand qu’on s’en grille une ?

  • ChewingGrid — Voici un tout nouveau système de grilles CSS qui vient de rejoindre ma liste de frameworks. Créé à partir de la propriété CSS3 flexbox, ChewingGrid n’oublie pas les navigateurs mous du genou grâce à la propriété float qui vient en renfort. Fait avec amour et concision par Thomas Zilliox.
  • Flexible.gs — Grille de mise en page avec Flexbox, compatible Bootstrap. Disponible sur Github.
  • KNACSS — Le fameux framework CSS simple et léger est prêt pour Flexbox.

tout en réglant les problèmes

Que celui qui n’a jamais buggé lui jette la première pierre.

  • Flexbugs — Liste des problèmes rencontrés avec Flexbox et comment les résoudre en fonction des navigateurs.

d’utilisation

Oui, si l’on en croit HTML5 Please et Can I Use, les voyants sont au vert : Flexbox, c’est pour maintenant. D’ailleurs de nombreux développeurs et intégrateurs front-end l’utilisent déjà je dois être le seul à ne pas encore l’utiliser 😉

N’hésitez pas à suivre @goetter@harrisfreddy@IAmNotCyril@Metal3d@magsout, @dhoko_, @Nico3333fr et tant d’autres pour continuer votre veille.

avec une poire pour la soif

CSSFlexbox — Articles, astuces  et ressources à propos de Flexbox. Liste maintenue par Hey Designer.

N’hésitez pas à me signaler les liens sur Flexbox qui auraient échappés à ma vigilance. Merci o/