CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です

CSS Flexboxを学ぶ人のために作成されたチートシートを紹介します。

Flexboxの各プロパティと値でレイアウトがどのようになるか一目できます。チートシートは高解像度版も無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。

CSS Flexboxのチートシート

CSS Flexbox Cheat Sheet 🔥
by Mariana Simon

Flexboxのチートシートの高解像度版のダウンロードは、下記ページから。

サイトのキャプチャ

Flexbox CSS Cheat Sheet

チートシートを右クリックして、画像を保存してください。

Flexboxのチートシートは英語ですが、プロパティと値を使用してレイアウトがどうなるのか分かればよいので、英語が苦手な人でも問題ないと思います。

Flexboxのチートシート

Flexboxのチートシートの一部

  • displayプロパティ
    Flexboxを使用するには親要素にdisplay: flex;(または、display: inline-flex;)を適用すると、その子要素がFlexアイテムになります。
  • flex-directionプロパティ
    FlexアイテムがFlexコンテナでどのように配置されるか明示します。方向は2種類で、横列(row)の水平、縦列(column)の垂直に配置できます。
  • flex-wrapプロパティ
    Flexコンテナが複数のFlexアイテムを一行(no-wrap)、または複数行(wrap)に配置することをコントロールします。

Flexboxの各プロパティの詳しい説明は、下記の記事をご覧ください。

sponsors

top of page

©2021 coliss