Jecelyn Yeen

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

The screenshots appearing in this article are from this web page:Centering a text element with Flexbox.

Discover CSS flexbox

When an HTML element on your page hasdisplay: flex ordisplay: inline-flex applied to it, youcan see aflex badge next to it in theElements panel.

Modify layouts with the flexbox editor

You can modify flexbox layouts visually with theflexbox editor. For example, here is how you can center the text<h1> of thisdemo page within its container<div class="container">.

1. Inspect the container element.
2. In theStyles pane, you can see theflexbox editor button next to thedisplay: flex declaration.
3. Click on it to open theflexbox editor. The editor displays a list of flexbox properties. Each property's value options are displayed as icon buttons.
4. To center the text on the screen, you can click on thejustify-content: center andalign-items: center buttons.
5. The text are centered now. Notice thejustify-content: center andalign-items: center declarations are added in theStyles pane.

Examine the flexbox layout

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

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

Try changing the value tojustify-content: flex-end. The overlay is changed accordingly.

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

Adjust the flexbox overlay color

Open theLayout pane and scroll down to theFlexbox section. You can view all the flexbox elements of the page here.

You can toggle the overlay of each flexbox element with the checkbox next to it. It is the same as you click on thebadge in theDOM 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 thecontainer overlay is changed to black.

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