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, an element laid out using a Flexbox container has the word
flex next to it as shown in the following image:
Click the word
flex in the HTML pane to keep the overlay visible when you move the mouse away from the container.
In the infobar
When you hover over an element in the HTML pane, you will see an infobar that gives you more information about the element. When you hover over a flex element or container, the inforbar includes the appropriate information.
The header is a flex container:
The navbar link is a flex item:
And finally, the nav element is both a flex item inside the header and a flext container which holds the menu items:
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 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, showing an outline around each flex object:
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
The CSS pane's Layout pane includes a collapsible "Flex Container" section. If you expand the section without selecting a flexbox container, it will only include the message, "Select a Flex container or item to continue" Once you select an item whose display is defined as flex, the panel will include a number of options for viewing information for the container or item. 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 item 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 element:
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.