gap

プロパティ・値の解説

CodePenで動作チェック

gap・・・フレックスアイテム同士の余白を具体的数値で指定

See the Pen プロパティ:gap by 脇坂基徳 (@rvyolqet-the-vuer) on CodePen.

プロパティ「gap」の値によるそれぞれの挙動は以下でも確認できます。

gapプロパティの値による挙動の違い
CSS Demo: gap(mozilla.net)

フレックスアイテム同士の余白を具体的数値で指定するプロパティ

「justify-content」は主軸方向の揃え方の指定でしたが、この「align-content」はフレックスコンテナの枠全体の交差軸方向の揃え方の指定です。
基本的に高さが固定の場合などに使用することがあります。交差軸ならではの配置方法が出てきます。

また前述の「align-items」は非常によく似たプロパティですが、「align-items」はコンテナ行内での整列方法の指定で、「align-content」は内部の枠全体の整列方法の指定です。

数値を1つだけ指定すると上下左右に、2つ指定すると上下・左右の余白になります。

参考:align-items と align-content の違い : CSS Tips | iPentec