DevTools Tips hero logo

DevTools Tips: How to inspect and debug CSS flexbox

Published on

Chrome DevTools makes debugging CSS flexbox layouts intuitive. The Elements panel provides you with a context-aware Flexbox Editor and customizable overlay.

Watch the video to learn how to:

  • Use the Flexbox Editor to change flexbox properties with a click of a button instead of typing them.
  • Toggle the flexbox overlay in the viewport to see the changes you make right away.
  • Use the Elements > Layout > Flexbox section to see a list of all elements and locate them in the DOM tree. Additionally, you can customize the overlay colors here.

To learn more about CSS flexbox in general, see Learn CSS > Flexbox.

For a more hands-on debugging experience in DevTools, follow the Inspect and debug CSS flexbox layouts tutorial.

Published on Improve article


Deprecations and removals in Chrome 106


Federated Credential Management API (FedCM) origin trial extended

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.