The Flexbox Inspector allows you to examine CSS Flexbox Layouts using the Firefox DevTools, discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
Discovering Flex Containers
When an HTML element on your page has
display: flex applied to it, a number of features are made available in the DevTools to provide easy access to Flexbox layout features.
In the HTML pane
In the HTML Pane, elements laid out using a Flexbox container have the word
flex next to it.
In the CSS pane
In the CSS pane's Rules view, any instance of a
display: flex declaration gets a small Flexbox icon next to the word
flex. Click the icon to toggle the display of an overlay that shows how the details of the flexbox's child elements.
Clicking the icon toggles the display of an overlay on the page, which appears over the element, laid out show the position of its grid lines and tracks:
The overlay is still shown when you select other elements, so you can edit related CSS properties and see how the flexbox is affected by the changes.
The Layout Flex Container section
When a page is composed of one or more flexbox containers, the CSS pane's Layout view includes a "Flex Container" section including a number of options for viewing the components of the container. You can find out more about those in the section below.
Note: The Layout view can be found underneath the Layout tab on the right-hand pane of the Page Inspector. The above and below screenshots should give you further hints on how to get to this.
Flex Container options
The Flex Container section of the Layout view looks like this:
There are two settings you can change in the Flex Container section:
- You can control the color of the overlay by clicking on the example. When you click on the color swatch, a color picker pops up and you can select a different color for the overlay.
- The switch on the right-hand side of the Flex Container section will also toggle the overlay on and off.
Flex Container Properties
Each component of the flexbox has a numbered entry that includes the element name and its class, if any. Hover over the element to highlight it on the page.
If you click on the item, the display shifts to show details about that component:
This view shows three pieces of information about the component:
- Shape of the component
- Base Size - the size of the component without any restraints imposed on it by its parent.
- Final Size - the size that the component would have after any sizing constraints imposed on it by the flexbox are applied.
At the top of the section, the name of the item selected, is a drop-down list of all the components of the flexbox container:
You can use this drop-down to select any of the other components in the Flexbox.