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)"