Flexboxを使うとき、ちら見できるようなチートシートを作成しました。
使い方の説明はチートシートの後に続きます。
Grid Layoutのチートシートはこちら
Flexbox チートシート
PDF版はこちら
Flexboxチートシートの見方
チートシートの左側は親要素に設定するプロパティ、
右上は子要素に設定するプロパティ、
右下は各プロパティと各値の説明になります。
よく使うプロパティは太文字、デフォルトは黄色文字です。
人型アイコンは参照を示し、枠人型①に対しては塗人型①を参照してください。
手型アイコンはショートハンドプロパティを示しています。
Flexboxの作り方
チートシートを見ながら読み進めてください。
①親要素をフレックスコンテナとして指定する。
display: flex;
これだけでデフォルトである flex-direction: row; のflexboxができます。
②フレックスコンテナの主軸方向を指定する。
flex-direction:
チートシート左側にある②の四つの選択肢から、主軸方向を選択します。
デフォルトでは左上にある flex-direction: row; が設定されますが、
他に row-reverse; column; column-reverse; の三種類が選べます。
flex-wrap:
子要素（フレックスアイテム）が多い場合は flex-wrap: で折り返しの方法を指定します。
| 値 | 説明 |
|---|---|
| nowrap; | 折り返しなし |
| wrap; | 折り返しあり |
| wrap-reverse; | 逆方向から折り返し |
flex-flow:
flex-direction: と flex-wrap: のショートハンド
各要素の位置やサイズを調整して完成。
各要素の位置調整には、②で設定した主軸、交差軸方向が影響します。
各プロパティに対する指定可能な値についてはチートシートの各項目を、
それぞれの値の動き方については右下にある人型②を参照してください。
親要素に設定するプロパティ
| プロパティ | 説明 |
|---|---|
| justify-content: | 主軸方向における子要素の位置指定 （人型①参照） |
| align-items: | 交差軸方向における子要素の位置指定 （人型①参照） |
| align-content: | flex-wrap: で折り返された行の交差軸方向の位置指定 （人型①参照） |
各子要素に設定するプロパティ
| プロパティ | 説明 |
|---|---|
| flex-grow: | 伸びる比率 |
| flex-shrink: | 縮む比率 |
| order: | 順序の指定 |
| flex-basis: | 主軸方向におけるサイズ指定（widthにもheightにもなり得る） |
| align-self: | 交差軸方向における各子要素の位置指定 （人型①参照） |
| z-index: | 子要素同士の重なりの順序指定 |
| flex: | flex-grow: と flex-shrink: と flex-basis: のショートハンド |
主軸、交差軸方向がわかると簡単にFlexboxが使えますね！
英語版のチートシートはこちら。
Flexbox cheat sheet / English version
Grid Layoutのチートシートはこちら
参考
MDN: flexbox
CSS-TRICKS: flexbox
Udemy: CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)