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

Post on:2021年6月16日

sponsors

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

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

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）に配置することをコントロールします。