FlexboxのチートシートをCSSを書いている時に利用できるVS Codeの機能拡張

CSSを書いている時に、ふとFlexboxのプロパティがどんな挙動だったか確認したくなることはありませんか？

CSSをVisual Studio Codeで書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。
Flexboxの各プロパティや値がどのような挙動か、一目で分かります。

CSS Flexbox Cheatsheet -VS Code

1年ほど前にも紹介しましたが、先日v3にバージョンアップしました！
ほとんどのプロパティにインタラクティブなデモが追加され、各値がどのように機能するかより分かりやすくなっています。

Flexboxの挙動がアニメーションに

CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。
参考: CSS Flexbox の基礎知識と使い方を詳しく解説

機能拡張のダウンロードは、下記ページから。

CSS Flexbox Cheatsheet -VS Code

「Install」ボタンをクリックして、VS Codeを起動してインストールします。

VS Codeを起動して、インストール

インストールが完了したら、Flexboxのチートシートを開く方法は、2通りです。

• Flexboxのスタイルシートにカーソルを合わせて、「Open Flexbox Cheatsheet」を選択。
• Cmd+Shift+P（macOS）、Ctrl+Shift+P(Win)を押して「Open Flexbox Cheatsheet」コマンドを実行。

これでCSSを書きながら、Flexboxのチートシートを利用できます。

CSS FlexboxのチートシートをVS Codeで表示

チートシートの対応ファイルは、下記の通りです。

• CSS
• Less
• Sass
• Scss

チートシートには、コンテナ、アイテムごとに各プロパティと値がまとめられており、一目で分かります。

Flexboxのチートシート

Flexboxのチートシート

Flexboxのチートシート

Flexboxのチートシート

Flexboxのチートシート