CSS align-content 属性

定義と使用方法

align-content 属性の変更 flex-wrap 属性の動作。それは align-items 似ているが、エラストリックアイテムを整列するのではなく、エラストリックラインを整列します。

注意：この属性が有効になるためには、複数の行のアイテムが必要です！

ヒント：使用 justify-content 属性はメイン軸（main-axis）上のアイテムを水平に整列します。

参照もしてください：

CSS タイムライン：CSS Flexbox

CSS タイムライン：CSS グリッド

CSS リファレンスマニュアル：align-items 属性

CSS リファレンスマニュアル：align-self 属性

CSS リファレンスマニュアル：justify-content 属性

HTML DOM リファレンスマニュアル：alignContent 属性

例

行をエラストリックコンテナの中央にパッケージ化する：

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

自分で試してみてください

CSS 言語

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

属性値

値 説明
stretch デフォルト値。行は残りのスペースを占めるために伸ばされます。
center エラストリックコンテナの中央に向けて行をパッケージ化します。
flex-start エラストリックコンテナの始めに向けて行をパッケージ化します。
flex-end エラストリックコンテナの終わりに向けて行をパッケージ化します。
space-between 行はエラストリックコンテナ内で均等に配置されます。
space-around 行はエラストリックコンテナ内で均等に配置され、両端各半。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： stretch
継承： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 言語： object.style.alignContent="center"

ブラウザのサポート

テーブルの数字には、この属性を完全にサポートする最初のブラウザのバージョンが記載されています。

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0