ウミ
クル

Flexboxのチートシートと使い方

縦横どちらか一方向(一次元)のレイアウトに便利なFlexboxについて説明します。
まずはチートシートをご覧ください。

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: のショートハンド

flex direction

③各要素の位置やサイズを調整して完成。

各要素の位置調整には、②で設定した主軸、交差軸方向が影響します。
各プロパティに対する指定可能な値についてはチートシートの各項目を、それぞれの値の動き方については右下にある参照アイコン②を確認してください。

親要素に設定するプロパティ

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