CSS - how to debug Flexbox in Chrome DevTools

0 points
Created by:

In this article, we would like to show you how to debug CSS Flexbox in Chrome DevTools.

CSS flexbox debugging tools is a new add-on introduced in Chrome 90 that allows you to easily test Flexbox styles.


  1. Enable Chrome DevTools (F12) or right-click on the element on the page that you want to examine and select the Inspect option.
  2. If the element has the display:flex or display:inline-flex properties in the Style pane, the Flexbox editor icon is next to it.
CSS - how to debbug flexbox in Chrome DevTools
​​​​​Flexbox debugging tools


Clicking on each of the options causes a given style to be added and real changes occur on the page.

Alternative titles

  1. CSS - flexbox debugging tools
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

CSS - Flexbox

Native Advertising
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂