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.
