Depuis la version 90 de Google Chrome, les DevTools s’agrémentent d’une nouvelle fonctionnalité pour manipuler plus simplement les modèles de boites flexibles.
À l’instar des propriétés color ou encore transform qui s’accompagnent d’une icône ouvrant une tooltip permettant un manoeuvrement plus explicite de leurs valeurs, les déclarations display: flex et display: inline-flex profitent désormais de la même mécanique.
La tooltip contient un éditeur icônisé de l’ensemble des propriétés (à l’exception de gap) modifiant le comportement d’un élément flexible : flex-direction pour la direction, flex-wrap pour l’empilement, justify-content / align-content pour la répartition et align-items pour l’alignement.
Cet ajout ne sera pas forcément utile pour les intégrateurs déjà bien habitués à Flexbox mais peut être d’une aide non négligeable pour les plus novices, l’apprentissage de Flexbox n’étant pas une chose aisée en intégration web.
De plus, l’onglet Layout possède dorénavant une section Flexbox répertoriant tous les éléments flexibles présents sur la page.
Si vous souhaitez vous initier ou parfaire votre compréhension de Flexbox, il existe pléthore de ressources de qualité comme le guide de css-tricks.com et l’approche ludique Flexbox Froggy.
