Flexboxのチートシートと使い方
2020年3月9日
縦横どちらか一方向（一次元）のレイアウトに便利なFlexboxについて説明します。
まずはチートシートをご覧ください。
チートシートの見方
チートシートの左側は親要素に設定するプロパティ、右上は子要素に設定するプロパティ、右下は各プロパティと各値の説明です。
よく使うプロパティは太文字、デフォルトは黄色文字。
人型のアイコンは参照を示し、手型のアイコンはショートハンドプロパティを示しています。
①親要素をフレックスコンテナとして指定する。
display: flex;
これだけでデフォルトである flex-direction: row; のflexboxができます。
（position: fixed; または absolute; で指定された子要素はフレックスアイテムにはならない）
②フレックスコンテナの主軸方向を指定する。
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が使えますね！
参考
MDN "flexbox"
CSS-TRICKS "flexbox"
Udemy "CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)"