CSS GridとFlexboxで役立つチートシート、各プロパティの役割がぱっと見てすぐ分かる簡単便利
Post on:2019年9月10日
CSS GridとFlexboxの各プロパティに値を指定した際、それぞれがどのようになるかまとめられた簡単便利なチートシートを紹介します。レイアウトとコードがまとめられたシンプルなチートシートで、あれ何だっけ? という時用にブックマークしておくと便利です。
![Flexboxの実装チートシート](http://coliss.com/wp-content/uploads-201803/2018091001.png)
まずは、CSS Flexbox用のチートシートから。
CSSのプロパティは親要素のコンテナ・子要素のアイテムごとに分けられており、各プロパティの値でレイアウトがどのように変わるか、ぱっと見てすぐ分かります。
各プロパティの詳しい解説は、下記をご覧ください。
![Flexboxの実装チートシート](http://coliss.com/wp-content/uploads-201803/2018091002-01.png)
CSS Flexbox Cheatsheet: 親要素のコンテナ
![Flexboxの実装チートシート](http://coliss.com/wp-content/uploads-201803/2018091002-02.png)
CSS Flexbox Cheatsheet: 子要素のアイテム
続いて、CSS Grid用のチートシート。
こちらも同様に、CSSのプロパティは親要素のコンテナ・子要素のアイテムごとに分けられています。
各プロパティの詳しい解説は、下記をご覧ください。
![CSS Gridの実装チートシート](http://coliss.com/wp-content/uploads-201803/2018091002-03.png)
CSS Grid Cheatsheet: 親要素のコンテナ
![CSS Gridの実装チートシート](http://coliss.com/wp-content/uploads-201803/2018091002-04.png)
CSS Grid Cheatsheet: 子要素のアイテム
sponsors