かなり便利！VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet

Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。

justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。

CSSを書きながらFlexboxのチートシートをVS Codeに表示中

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

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

CSS Flexbox Cheatsheet -Visual Studio Code Marketplace

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

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

Flexboxのチートシートを開く方法は、2通りです。

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

「Open Flexbox Cheatsheet」を選択

チートシートを開くと、こんな感じ。

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

もちろん、スタイルシートを書きながらチートシートを表示できます。

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

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

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