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.
- CSS Flexible Box Layout Module Level 1 — A tout seigneur, tout honneur, voici les spécifications du W3C.
- Flexbox, le guide complet — Réunion de plusieurs articles de Chris Coyier sur Flexbox.
- CSS3 Flexbox Layout module — Tutoriel de Raphaël Goetter sur les tenants et les aboutissants de ce modules CSS3.
- A Visual Guide to CSS3 Flexbox Properties — Tutoriel complet et illustré sur les propriétés de Flexbox.
- Utilisation des flexbox en CSS — Tutoriel de Mozilla sur Flexbox.
- Don’t use flexbox for overall page layout — Petit comparatif entre
display:gridet Flexbox pour la mise en page globale d’un site. - Flexbox-presentation — Flexbox, c’est le moment d’y aller ! Par Freddy Harris qui est intervenu sur le sujet @parisjs cf. la vidéo ParisJS46 à partir de la 29e minute (ou suivez ce lien vers youtube).
- Flexrox — Last but not least, voici une présentation de Flexbox par Raphaël Goetter (à qui je souhaite un joyeux anniversaire !).
à la pratique
Les trucs qu’on voulait faire en CSS mais qu’on pouvait pas et maintenant qu’on peut ?
- Une grille responsive avec CSS3 Flexbox — Comment concevoir des grilles de mise page responsive ?
- CSS Vertical Center with Flexbox — Centrage vertical avec Flexbox.
- Centrer verticalement les modales Bootstrap — Encore du centrage vertical avec Flexbox, mais en français, s’il vous plait !
- Solved by Flexbox — La liste de tous les problèmes récurrents en CSS résolus par Flexbox.
- Flexbox, c’est la vie! — Plus ou moins la même chose que le lien précédent. Merci à Raphaël Goetter pour l’initiative.
- Jack in the flexbox — Etudes de cas avec Flexbox sur Codepen.
- The ultimate Flexbox cheatsheet — Encore plein de trucs sur Flexbox.
- Building Flexbox website — Atelier mise en page avec Flexbox
- Le modèle CSS3 flex-box — Réaliser une page web « classique » avec Flexbox.
- Easy Masonry Layout With Flexbox — Réaliser une maquette type Masonry avec Flexbox en quelques étapes + le Codepen qui va bien.
- Simple flexible layout — Un Codepen pour une maquette de page flexible composée d’un header, d’un contenu encadré de deux sidebars et d’un footer. Merci @tr13ze.
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
divmises 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éfloatqui 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/