本文共 946 字，大约阅读时间需要 3 分钟。

使用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的原创文章，尽在：“汪子熙”:

转载地址：https://jerry.blog.csdn.net/article/details/114022300 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！