かなり便利!VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet
Post on:2019年9月12日
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で表示
sponsors