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 CSS pane’s Rules view, any instance of a display: flex declaration gets a small Flexbox icon next to the word flex. Clicking the icon toggles the display of an overlay on the page, which appears over the selected flex container that displays an outline around each flex item:
The flex items within the flex container are displayed as a numbered list in the Flex Items section. Each entry displays the item’s selector. Hover over an element to highlight it on the page. If you click on the item, the display shifts to show details about that element.