最近在F12看网页源码的时候,忽然间发现某些网站多了一个flex按钮,我一阵恍惚,竟然记不得究竟是何时出现了这个功能。

在这里插入图片描述
在display:flex的右侧也增加了一个小菜单,点击菜单可以弹出
flex-direction
flex-wrap
align-content
justify-content
align-items
在这里插入图片描述

在网上搜了一下,daily-dev-tips有一个简单的介绍,很基础。

https://daily-dev-tips.com/posts/chrome-devtools-flex-debugger/#:~:text=First%2C%20we%20need%20to%20open%20the%20Chrome%20Dev,behind%20grid%20elements%3B%20this%20was%20the%20existing%20feature.

flex debugger.

这个功能的学名叫做flex debugger 。make life easier.

i must say i super stoked by this feature. it’s a quick visual way to check out what’s going on with our flex elements。
maybe it will help developers better and quickly make a beautiful website by use flex layout.
it’s time to hug flex

GitHub 加速计划 / de / devtools
45
5
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:4 个月前 )
79116147 - 5 个月前
f0359002 - 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐