かなり便利!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の各プロパティや値がどのように配置されるか、一目で分かります。
![VS CodeでCSSを書きながらFlexboxのチートシートをVS Codeに表示中](http://coliss.com/wp-content/uploads-201903/2019090801-04.png)
CSSを書きながらFlexboxのチートシートをVS Codeに表示中
CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。
参考: CSS Flexbox の基礎知識と使い方を詳しく解説
機能拡張のダウンロードは、下記ページから。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201903/2019090802.png)
CSS Flexbox Cheatsheet -Visual Studio Code Marketplace
「Install」ボタンをクリックして、VS Codeを起動してインストールします。
![CSS FlexboxのチートシートをVS Codeで表示](http://coliss.com/wp-content/uploads-201903/2019090801-02.png)
VS Codeを起動して、インストール
Flexboxのチートシートを開く方法は、2通りです。
- Flexboxのスタイルシートにカーソルを合わせて、「Open Flexbox Cheatsheet」を選択。
- Cmd+Shift+P(macOS)、Ctrl+Shift+P(Win)を押してOpen Flexbox Cheatsheetコマンドを検索。
![CSS FlexboxのチートシートをVS Codeで表示](http://coliss.com/wp-content/uploads-201903/2019090801-03.png)
「Open Flexbox Cheatsheet」を選択
チートシートを開くと、こんな感じ。
![CSS FlexboxのチートシートをVS Codeで表示](http://coliss.com/wp-content/uploads-201903/2019090801-01.png)
CSS FlexboxのチートシートをVS Codeで表示
もちろん、スタイルシートを書きながらチートシートを表示できます。
![CSS FlexboxのチートシートをVS Codeで表示](http://coliss.com/wp-content/uploads-201903/2019090801-04.png)
CSS FlexboxのチートシートをVS Codeで表示
チートシートをスクロールすると、コンテナ、アイテムごとに各プロパティと値がまとめられており、一目で分かります。
![CSS FlexboxのチートシートをVS Codeで表示](http://coliss.com/wp-content/uploads-201903/2019090801-05.png)
CSS FlexboxのチートシートをVS Codeで表示
sponsors