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

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

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

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

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

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

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

サイトのキャプチャ

CSS Flexbox Cheatsheet -Visual Studio Code Marketplace

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

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

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

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

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

「Open Flexbox Cheatsheet」を選択

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

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

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

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

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

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

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

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

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

sponsors

top of page

©2024 coliss