![Jecelyn Yeen](https://web.dev/images/authors/jecelynyeen.jpg) Jecelyn Yeen [X](https://twitter.com/jecfish) [GitHub](https://github.com/jecfish) [Bluesky](https://bsky.app/profile/jec.fish) [Homepage](https://jec.fish/)

<br />

[Video](https://www.youtube.com/watch?v=J5n2aS37rpE)

This guide shows you how to discover flexbox elements on a page, as well as inspect and modify the flexbox layouts in the **Elements** panel.

The screenshots appearing in this article are from this web page: [Centering a text element with Flexbox](http://jec.fish/demo/css-flexbox).

## Discover CSS flexbox

When an HTML element on your page has `display: flex` or `display: inline-flex` applied to it, you
can see a `flex` badge next to it in the [**Elements**](https://developer.chrome.com/docs/devtools/open.md.txt) panel.

![Discover flexbox](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/discover-flexbox-be605a163a192.png)

## Modify layouts with the flexbox editor

You can modify flexbox layouts visually with the **flexbox editor** . For example, here is how you can center the text `<h1>` of this [demo page](http://jec.fish/demo/css-flexbox) within its container `<div class="container">`.

1. [Inspect](https://developer.chrome.com/docs/devtools/css/reference.md.txt#select) the container element.
2. In the **Styles** pane, you can see the **flexbox editor** button next to the `display: flex` declaration. ![flexbox editor button](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/flexbox-editor-button-31bc20eb18986.png)
3. Click on it to open the **flexbox editor** . The editor displays a list of flexbox properties. Each property's value options are displayed as icon buttons. ![flexbox editor](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/flexbox-editor-1498c5467be09.png)
4. To center the text on the screen, you can click on the `justify-content: center` and `align-items: center` buttons. ![Center the text in its container](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/center-text-its-contain-36aee74962027.png)
5. The text are centered now. Notice the `justify-content: center` and `align-items: center` declarations are added in the **Styles** pane.

## Examine the flexbox layout

You can hover over the flexbox element in the **Elements** panel to visualize the layout. The overlay appears over the
element, laid out with dotted lines to show the position of its content and items.

![hover over a flexbox element](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/hover-a-flexbox-element-97868d0b93e3e.png)

Alternatively, you can click on the badge to toggle the display of the flexbox overlay.

![change justify-content to flex-end](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/change-justify-content-f-c2b95dc213b96.png)

Try changing the value to `justify-content: flex-end`. The overlay is changed accordingly.

![justify-content: flex-end](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/justify-content-flex-end-a1697b0a273d5.png)

The icons in the **flex editor** are context-aware. It will change according to the layout direction. For example, when you change the `flex-direction` to `column`, the icons in the **flex editor** are rotated accordingly. The overlay is updated immediately too.

## Adjust the flexbox overlay color

Open the **Layout** pane and scroll down to the **Flexbox** section. You can view all the flexbox elements of the page here.

![Layout pane](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/layout-pane-e777c443c70bd.png)

You can toggle the overlay of each flexbox element with the checkbox next to it. It is the same as you click on the `badge` in the **DOM tree**.

Apart from that, you can change the color of the overlay by clicking on the color icon next to it. For example, the color of the `container` overlay is changed to black.

![change overlay color](https://developer.chrome.com/static/docs/devtools/css/flexbox/image/change-overlay-color-1be8fdb57efbc.png)

To navigate to a flexbox element in the DOM tree, you can click on the selector icon next to it.