css3 flex 早見表。inline-block は古いので flex を使いましょう

display: flex; と一緒に記述するもの

• flex-flow: (flex-direction, flex-wrap をまとめて設定できる)
• flex-direction: 並び方向 (row, row-reverse, column, column-reverse)
• flex-wrap: 改行設定 (nowrap, wrap, wrap-reverse)
• justify-items: 子要素の x 軸の配置
• justify-content: 子要素の行、列の x 軸の配置
• align-items: 子要素の y 軸の配置
• align-content: 子要素の行、列の y 軸の配置
• place-items: 子要素の x, y 軸の配置
• place-content: 子要素の行、列の x, y 軸の配置

flex-flow: (flex-direction, flex-wrap をまとめて設定できる)

• row nowrap (初期値)
• row wrap
• row wrap-reverse
• column nowrap
• column wrap
• column wrap-reverse

flex-direction: 並び方向 (row, row-reverse, column, column-reverse)

• row (初期値) ... 横方向に並べる
• row-reverse ... 横方向に逆方向に並べる
• column ... 縦方向に並べる
• column-reverse ... 縦方向に逆方向に並べる

flex-wrap: 改行設定 (nowrap, wrap, wrap-reverse)

• nowrap (初期値) ... はみ出しても一列に並べて表示する
• wrap ... 枠内で改行する
• wrap-reverse ... 枠内で逆に改行する。row だと上に改行する。column だと左に改行する。

justify-items: 子要素の x 軸の配置, align-items: 子要素の y 軸の配置, place-items: 子要素の x, y 軸の配置

• flex-start ... 左寄せ、上寄せ
• center ... 中央寄せ
• flex-end ... 右寄せ、下寄せ
• space-between ... 均等配置1
• space-around ... 均等配置2
• space-evenly ... 均等配置3

justify-content: 子要素の行、列の x 軸の配置, align-content: 子要素の行、列の y 軸の配置, place-content: 子要素の行、列の x, y 軸の配置

• start ... 左寄せ、上寄せ
• center ... 中央寄せ
• end ... 右寄せ、下寄せ
• space-between ... 均等配置1
• space-around ... 均等配置2
• space-evenly ... 均等配置3

display: flex; を設定した子要素に記述するもの

• order: 表示する順番 (0〜n)
• flex: (flex-grow, flex-shrink, flex-basis をまとめて設定できる)
• flex-grow: 横幅 (row)、高さ (column) の伸ばす割合 (0〜n)。数値が高いほど伸びる
• flex-shrink: 横幅 (row)、高さ (column) の縮める割合 (0〜n)。数値が高いほど縮む
• flex-basis: 横幅 (row)、高さ (column) を指定する
• justify-self: x 軸の配置
• align-self: y 軸の配置
• place-self: x, y 軸の配置

order: 表示する順番 (0〜n)

• 0 (初期値)
• 0〜n 数値

flex: (flex-grow, flex-shrink, flex-basis をまとめて設定できる)

• 0 1 auto (初期値)

flex-grow: 横幅 (row)、高さ (column) の伸ばす割合 (0〜n)。数値が高いほど伸びる

• 0 (初期値)
• 0〜n 数値

flex-shrink: 横幅 (row)、高さ (column) の縮める割合 (0〜n)。数値が高いほど縮む

• 1 (初期値)
• 0〜n

flex-basis: 横幅 (row)、高さ (column) を指定する

• auto (初期値)
• content
• 0px〜(n)px

justify-self: x 軸の配置, align-self: y 軸の配置, place-self: x, y 軸の配置

• auto
• normal
• self-start
• self-end
• flex-start
• flex-end
• center
• baseline
• first baseline
• last baseline
• stretch