VS Code extension that lets you open a flexbox cheatsheet directly in the editor.
The cheatsheet can be opened in a few ways:
Ctrl + Shift + P(Win, Linux) /
Cmd + Shift + P(Mac) and search for the
Open CSS Flexbox Cheatsheetcommand.
Ctrl + K K(Win, Linux) /
Cmd + K K(Mac) keyboard shortcut.
display: flexdeclaration and click the
Open CSS Flexbox Cheatsheetlink in the popup.
Open CSS 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. This is available for the following file types:
Most properties also have interactive playgrounds that are part of the cheatsheet.
After opening the cheatsheet, you can select the directionality to be used in the interactive playgrounds. This is especially useful for languages that write from right-to-left. Learn more.
The colors of the cheatsheet automatically adapt to the selected theme. The font is based on the user’s preferred font.
If you find this extension useful and would like to support my work, you can buy me a cup of tea. Thank you!
Open CSS Flexbox Cheatsheetcommand
Open CSS Flexbox Cheatsheetlink on hover