CSS Flexbox Inspector: Examine Flexbox layouts

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:

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

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.

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

Clicking the icon toggles the display of an overlay on the page, which appears over the element, showing an outline around each flex object:

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

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:

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

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.

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

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.