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, elements laid out using a Flexbox container have the word flex next to it.

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on 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.

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, laid out show the position of its grid lines and tracks:

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

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:

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 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.

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 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.

Document Tags and Contributors

Contributors to this page: irenesmith, dvincent
Last updated by: irenesmith,