Cet article a 7 ans. Il commence à dater mais n'est pas forcément obsolète. Lisez-le en gardant son âge en tête ! Merci.
Article invité par Stéphanie Walter
UX Designer et experte mobile, je porte une attention toute particulière à l’expérience utilisateur et fais partie des personnes qui voient le CSS comme un outil de design. Formations, cours à l’université, conférences et articles de blog dans différentes langues, j'aime partager mon savoir sous différentes formes.
J’ai commencé à apprendre le CSS en jouant avec des flottants et tentant de positionner des éléments en absolute et relative tout en espérant arriver à peu près au résultat escompté dans le navigateur. Pour mettre en page nos sites web nous avons aujourd’hui la chance d’avoir de nouveaux outils à notre disposition : Flexbox et Grid Layout.
Si vous n’avez pas besoin de supporter IE9 et inférieur, Flexbox est supporté presque partout et est utilisé pour créer des mises en page fluides et flexibles. Grid Layout quant à lui manque encore cruellement de support sur mobile notamment mais va devenir très intéressant pour construire des grilles complexes et responsives.
Les deux modules CSS peuvent sembler un peu effrayants et compliqués à maitriser. Il existe cependant pas mal d’outils très funs et sympas sur le net pour vous aider à les dompter (un peu comme le kiwi en bas de ce blog :D) et être prêts à les utiliser lorsque le support le permettra partout.
Cet article est une traduction de Fun places to learn CSS Layout – Part 1: Flexbox. Il est le premier d’une série sur les possibilités de mise en page CSS. Aujourd’hui, on commence par les ressources pour apprendre et maitriser flexbox.
Flexbox Froggy est un petit jeu très fun où il vous faudra utiliser différentes propriétés Flexbox pour placer les petites grenouilles sur leurs nénuphars respectifs. (par Thomas H. Park)
Flexbox defense est un jeu où vous devrez utiliser les propriétés Flexbox pour placer des tourelles de sorte à empêcher les vagues d’ennemies d’approcher. (par Channing Allen)
Parfois le meilleur moyen de découvrir une propriété CSS reste encore de jouer avec. Voici quelques sites où vous pourrez éclater avec les fonctionnalités et tout casser.
Ajoutez, supprimez et positionnez les enfants comme vous le souhaitez pour construire une mise en page flexible. (par Dimitar Stojanov)
Sur ce petit CodePen bac à sable de Gabi vous pourrez tester les différentes valeurs des propriétés et voir les résultats.
Un autre bac à sable créé par Bennett Feely pour tester les différentes propriétés et explorer les possibilités de ce module CSS.
Avant Flexbox, centrer verticalement était jusque là le Graal, la licorne rose à paillette, LE truc inaccessible (bon ok : LE truc BIEN relou faisable à gros coups de hacks). Ce site vous propose des astuces de mises en page possible et grandement facilitées grâce à Flexbox. (par Phil Walton)
C’est bien sympa de faire des mises en page, mais qu’en est-il de composants plus complexes comme des onglets ou des cartes ? C’est ce que vous propose de construire Flexbox Patterns (par CJ Cenizal)
La syntaxe de Flexbox n’est pas des plus faciles à appréhender, je vous propose donc quelques anti-sèches (cheatsheets pour les anglophones) pour vous aider à vous souvenir des propriétés et valeurs.
Wes Boss a fait 20 vidéos gratuites pour vous aider à apprendre Flexbox et vous pouvez également jeter un petit coup d’œil ici si vous voulez de jolis Gifs animés pour comprendre Flexbox.
Voilà, c’est tout pour Flexbox, la prochaine partie de la série sera consacrée à Grid Layout 🙂
Partager la publication "Apprendre le positionnement en s’amusant – Partie 1 : Flexbox"
Excellent article, merci pour ce condensé d’infos et j’attends la suite avec impatience 🙂
Bonne continuation !
Chouette article, j’arrive un peu après la guerre, mais c’est vraiment une chouette méthode pour apprendre certaines bases