例

フレックスコンテナの中心に向かって行を詰めます：

div {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

Try it Yourself ❯

定義と用法

align-content プロパティは、flexコンテナの交差軸（垂直）上に余分なスペースがある場合に、 flexコンテナ内のラインの配置法を示します。

チップ: 主軸（水平）上にアイテムを整列させるためには、 justify-content プロパティを使用します。

注: このプロパティが有効になるためには、アイテムの行が複数存在する必要があります。

デフォルト値：	stretch
継承：	継承する
アニメーション可否：	不可。animatable を参照
バージョン：	CSS3
JavaScript 構文：	object.style.alignContent="center" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -webkit- は、接頭辞付きで動作した最初のバージョンです。

CSS 構文

プロパティの値

プロパティ
align-content	21.0	11.0	28.0	9.0 7.0 -webkit-	12.1

値	説明	Play it
stretch	デフォルト値。行は残りのスペースを占有するように引き伸ばされます	Play it ❯
center	行はフレックス・コンテナの中央に向かて寄せられます	Play it ❯
flex-start	行はフレックス・コンテナの始端に向かって寄せられます	Play it ❯
flex-end	行はフレックス・コンテナの終端に向かって寄せられます	Play it ❯
space-between	行はフレックス・コンテナ内に均等に配分されます	Play it ❯
space-around	行はフレックス・コンテナ内に均等に配分されますが、始端と終端側のスペースは半分になります	Play it ❯
initial	プロパティにデフォルト値を設定します。initial を参照	Play it ❯
inherit	プロパティは親要素を継承します。inherit を参照

CSS align-content プロパティ

例

定義と用法

ブラウザ・サポート

CSS 構文

プロパティの値

関連ページ