VS Code extension that lets you open a flexbox cheatsheet directly in the editor.
The cheatsheet can be opened in two ways:
Press Ctrl+Shift+P (Win, Linux) / Cmd+Shift+P (Mac) and search for the Open Flexbox Cheatsheet command.
Hover any display: flex declaration and click the Open Flexbox Cheatsheet link in the popup.
Besides the Open Flexbox Cheatsheet link in the hover popup, there’s also an image shown for each flexbox property. This aims to make it easier to understand how each property works without opening the cheatsheet.
Most properties now also have interactive demos which can help you see how each value works.
Works with the following file types:
The colors of the cheatsheet automatically adapt to the selected theme. The font is based on the user’s preferred font.
Support my work
If you find this extension useful and would like to support my work, you can buy me a cup of tea. Thank you!
Using the Open Flexbox Cheatsheet command
Clicking the Open Flexbox Cheatsheet link on hover