Le groupe FirefoxDevTools de Mozilla a créé Flexbox Inspector, un outil qui sert à examiner les layouts Flexbox CSS. Grâce à Flexbox Inspector, les développeurs pourront mieux comprendre comment sont dimensionnés, positionnés et imbriqués les boîtes flexibles Flexbox.

Le module CSS Flexbox Layouts, ou CSS Flexible Box Layout, permet de définir un modèle de boîte CSS optimisé pour la conception d'une interface utilisateur, et de voir la mise en page en une dimension. Le module est de plus en plus utilisé pour créer des mises en page dynamiques. Avec le modèle de layout flexible, les éléments « enfants » d'un conteneur flexible peuvent être disposés dans n'importe quelle direction et ils peuvent adapter leur taille, s’agrandir pour remplir un espace vide ou se réduire pour éviter de déborder sur l’élément « parent ».

Un set de base pour démarrer 

Avec Flexbox Inspector, Mozilla propose un outil basé sur les concepts de CSS Grid Inspector, utilisé pour vérifier les mises en page CSS Grid. La courbe d’apprentissage de CSS Flexbox étant assez abrupte, l'équipe Mozilla a voulu rassembler les données permettant de construire un set de base fonctionnel. Dans un sondage destiné à identifier les domaines où les développeurs avaient besoin d'aide, ces derniers ont déclaré que les contraintes de largeur et de hauteur minimales/maximales étaient les plus importantes. De même que les fonctions de contraction/extension, qui affichent un score élevé dans les réponses des utilisateurs, à la surprise de l’équipe de Mozilla.

Flexbox Inspector est téléchargeable à partir de la page Firefox Quantum : Developer Edition du site de Mozilla.