使用flex布局的元素,在HTML裡能看到flex的小圖示,如下圖所示:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SZkNmZ0gzN5ETOihTZ1EDO1gTY0IWN2IzM3E2MhZjY48CX5d2bs92Yl1iclB3bsVmdlR2LcNWaw9CXt92Yu4GZjlGbh5yYjV3Lc9CX6MHc0RHaiojIsJye.png)
點選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