Mozilla launches CSS Flexbox inspector

The powerful but complex flexible-elements CSS feature stumps many developers

Mozilla’s FirefoxDevTools group has built a tool for examining CSS Flexbox layouts, called Flexbox Inspector. The tool helps developers understand the sizing, positioning, and nesting of Flexbox elements

CSS Flexbox Layouts, or CSS Flexible Box Layout, is a CSS module defining a CSS box model optimized for user interface design, with the layout in one dimension. It is growing in popularity for building dynamic page layouts. With the flex layout model, children of a flex container can be laid out in any direction and “flex” their sizes, growing to fill unused space or shrinking to avoid overflowing the parent.  

In developing Flexbox Inspector, Mozilla constructed a tool based on the concepts of CSS Grid Inspector, for examining CSS Grid layouts. CSS Flexbox has a steep learning curve, so the Mozilla team gathered data to help build the basic feature set. In a user survey, minimum/maximum width and height constraints received the highest score for areas that developers needed help on. And shrink/grow features had a higher-than-expected ranking.

Where to download Flexbox Inspector

You can download Flexbox Inspector from Firefox Quantum: Developer Edition.

Join the newsletter!


Sign up to gain exclusive access to email subscriptions, event invitations, competitions, giveaways, and much more.

Membership is free, and your security and privacy remain protected. View our privacy policy before signing up.

Error: Please check your email address.

More about BoxMozillaQuantum

Show Comments