Tout sur l'alignement en CSS par Rachel Andrew. Les choses ont beaucoup évolué dernièrement avec Flexbox, CSS Grid et la spécification Box Alignment. Dans la continuité de ses articles de référence déjà traduits dans la Cascade.
Dans les deux articles précédents, nous avons vu ce qui se passait lorsque nous créons un conteneur flex et nous avons examiné l'alignement en détail. Cette fois-ci, Rachel Andrew explore le dimensionnement en Flexbox : comment Flexbox décide-t-il de la taille de nos items ?
Rachel Andrew examine les propriétés d'alignement de Flexbox et découvre en chemin quelques règles de base qui nous aideront à nous rappeler comment ces propriétés fonctionnent sur les axes principal et transversal !
Le premier d'une série de trois articles passionnants de Rachel Andrew décomposant en détail Flexbox, ce pour quoi Flexbox a été conçu, ce qu'il fait vraiment bien, ce pourquoi il ne serait pas le meilleur choix.
Le grand Eric Meyer s'amuse avec CSS Grid : il décide de convertir son site personnel, qui doit rester compatible avec les anciens navigateurs, et nous montre la transformation en détail.
Robin Rendle a écrit un tutoriel simple pour s'initier à CSS Grid en commençant par les bases. Une excellente introduction au système de layout qui va nous changer la vie.
CSS Grid et Flexbox sont faits pour fonctionner ensemble. Grid pour l'organisation générale, Flexbox pour les ajustements spécifiques. Chen Hui Jing le démontre avec un exemple magistral (et quelques bonus)
Rachel Andrew est certainement le plus ardent des promoteurs de CSS Grid Layout. Elle répond ici à la question de savoir quand et comment utiliser Flexbox ou CSS Grid Layout.
Ayant lu l’article sur les quantity queries, Aaron Gustafson expérimente leur mise en oeuvre sur son site... avec Flexbox bien sûr, pour aller jusqu’au bout de l’aventure!
Levin Mejia, adepte de l’apprentissage par la pratique, nous propose de créer un layout flexible et responsif avec Flexbox. On s’amuse à apprendre ses concepts et propriétés fondamentales.
Les applications concrètes de Flexbox, suite : encore une solution simple à un problème compliqué de mise en page, présentée par David Walsh. Mais pourquoi diable a-t-il fallu attendre si longtemps?
Le centrage vertical est depuis toujours un cauchemar pour les développeurs web, et même s'il existe des solutions, aucune n'égale flexbox par sa simplicité. Un article concis de David Walsh.
Premier article d’une série sur les applications pratiques de Flexbox. Chris Coyier résout un problème d'alignement de titre et de sous-titre avec retour à la ligne, compliqué sans flexbox.
Tout comprendre sur space-between, le héros oublié de Flexbox. Noah Blon propose un cas pratique d'utilisation de cette valeur de justify-content dans Flexbox, super pratique pour vos mises en page.
Un article sympa de Noah Blon sur l'un des aspects les plus sacrément pénibles de flexbox. Un bon complément de l'excellent article sur les mises en page sur 12 colonnes.
La suite de la série de Landon Schropp sur Flexbox. Après avoir découvert les bases avec un simple dé, nous nous lançons dans les mises en page sur 12 colonnes.
Ce brillant article est le premier d’une série conçue par Landon Schropp pour expliquer Flexbox. Une méthode originale pour comprendre les fondamentaux de Flexbox et les mettre en pratique.
Le défilement faisant apparaître des backgrounds différents est une technique populaire aujourd'hui, souvent réalisée via de fortes doses de JavaScript. Dudley Storey en propose une version moderne en pur CSS.
Pour comprendre flexbox en profondeur, Zoe Gillenwater transforme un layout préexistant créé avec table. Grâce aux media queries et aux possibilités d'ordonnancement de flexbox, ce layout devient encore plus responsif.
Flexbox est une technique simple et puissante, mais elle pose encore quelques problèmes de compatibilité. Sean Fioritto répond ici à la question : quand pourrai-je utiliser Flexbox dans le monde réel?
Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici.