計劃于本月 29 日發(fā)布的 Firefox 65 開發(fā)者工具中將加入 Flexbox Inspector 功能。Flexbox Inspector 是一個新的開發(fā)者工具,可幫助開發(fā)者了解 Flebox 元素的大小、位置與嵌套情況。CSS Flexbox(彈性盒子)是一種越來越流行的布局模型,它是一種用于在行或列中布局元素的一維布局方法,彈性元素可填充頁面額外空間,也可以適當收縮以適合較小的空間,有助于構建強大的動態(tài)頁面,但是它的學習曲線非常陡峭。
開發(fā)者在一篇博客上具體介紹了該功能的研發(fā)背景與特性。作者說 FleXbox的難度之大,甚至當初團隊在開始 Flexbox Inspector 項目的時候都不確定自己足夠了解 Flexbox,也不清楚將面臨什么困難。
經(jīng)過一系列研究與設計,最終完成了 Flexbox Inspector 項目,作者表示,花了很大精力去做這個功能之后,他們擔心它會被淹沒在龐大的 Firefox 開發(fā)者工具集里,使得人們無法找到它或者不想去使用它。于是他們對此采取了積極主動的態(tài)度:只要開發(fā)者在標記視圖中選定了 Flex 容器或其它元素,那么就會自動出現(xiàn) Flexbox 信息,開發(fā)者可以在布局面板中的 Inspector 標簽下看到相應內容。
目前該功能可以在 Firefox 開發(fā)者版本中試用,更具體內容查看原博客:
https://hacks.mozilla.org/2019/01/designing-the-flexbox-inspector