VS Code 中的 Flexbox 速查表

这篇文章最初发表在我的博客上。

又一周，又一个 VS Code 扩展。到目前为止我已经发布了两个，这是一个月内的第三个。我没有参加什么“30 个 VS Code 扩展”挑战😂。只是脑子里不断冒出一些想法，我忍不住想尝试用它们做出点什么。

不用说，我非常享受这个过程，因为这些扩展正是我工作中一直缺少的。通过构建它们，我直接受益，它们也让我作为前端开发人员的工作变得轻松了一些。

过去几年，弹性盒子越来越流行。这理所当然，因为它能帮助我们更快地构建一维布局。你试过用弹性盒子在元素中间定位吗？很有意思，对吧？

但只有一个问题！记住所有 flexbox 属性可能很难。我知道这对我来说很难！我应该用justify-content还是align-items来做 X？它justify-content接受什么值？它们有很多，我们并不总是确定哪个属性起什么作用。这就是为什么我们会在那些时候查阅我们最喜欢的文章、指南、速查表等等。但它们都“存在”在代码编辑器之外，这迫使我们切换上下文。

一周前，我问自己：“为什么不在 VS Code 里做一个 Flexbox 速查表，这样我就可以快速找到我需要的内容并继续我的工作？为什么我需要切换上下文？为什么没有一个工具可以让我做到这一点？” 那一定很棒，对吧？

我也这么认为，所以我就建了它！🚀

我很高兴与大家分享我的新扩展“CSS Flexbox 速查表”。这里有一个小演示：

目前有两种方式可以打开备忘单：

• 通过按Ctrl+Shift+P(Win) / Cmd+Shift+P(Mac) 并搜索Open Flexbox Cheatsheet命令。
• 将鼠标悬停在任何display: flex声明上并单击Open Flexbox Cheatsheet弹出窗口中的链接（如演示中所示）。

我对未来的改进有一些想法，但我想与大家分享，以便获得反馈。所以，如果你使用 CSS，请尝试一下。希望你觉得它有用。