使用flex布局的元素，在HTML里能看到flex的小圖標，如下圖所示：

點擊flex小圖標，可以把flex container及其元素的輪廓高亮顯示：

在這個例子里，a標簽既是一個flex item，也作為flex container，裝載了button和span兩個字元素。

單擊flex這個小圖標可以高亮對應flex元素：

Flex container面板下一些屬性的說明。

• A diagram visualizing the sizing of the flex item
• Content Size - the size of the component without any restraints imposed on it by its parent
• Flexibility - how much a flex item grew or shrunk based on its flex-grow value when there is extra free space or its flex-shrink value when there is not enough space
• Minimum Size (only appears when an item is clamped to its minimum size) - the minimum content size of a flex item when there is no more free space in the flex container
• Final Size - the size of the flex item after all sizing constraints imposed on it have been applied (based on the values of flex-grow, flex-shrink and flex-basis)

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Firefox开发者工具里的CSS Flexbox Inspector的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。