English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSSリファレンスマニュアル

CSS@ルール（RULES）

CSS属性全書

CSS3 align-content属性の使用方法と例

説明

align-contentは、横軸に余分なスペース（垂直）がある場合、CSS属性を使用してフレックスコンテナ内の要素をフレックスコンテナ内に整列できます。この属性は単一行フレックスコンテナには影響しません。さらに、CSSを使用して： justify-content属性（水平）は、主軸上の要素を整列します。

以下の表は、この属性の使用状況とバージョンハイストリをまとめています。

デフォルト値：stretch
適用：多行フレックスコンテナ
継承：ありません
アニメーション可能：いいえ。参照してください： アニメーション属性。
CSSバージョン：CSS3の新機能
JavaScript構文：object.style.alignContent="center"

align-contentの使用構文

この属性の構文は以下の通りです：

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

以下の例では、CSSのalignを使用する方法を示しています：-content属性。

　.flex-container {
　　　　　　　　　　　/*　Safariブラウザ　*/
　　　　　　　　　　　display:　-webkit-flex;　
　　　　　　　　　　　-webkit-flex-flow: row wrap;
　　　　　　　　　　　-webkit-align-content: space-around;
　　　　　　　　　　　/*　標準的な構文　*/
　　　　　　　　　　　display: flex;
　　　　　　　　　　　flex-flow: row wrap;
　　　　　　　　　　　align-content: space-around;
　　　　}
テストして‹/›

属性値

以下のテーブルはこの属性の値を説明しています。

値説明
centerエレメントはフレックスコンテナの中心に位置します。
flex-startエレメントはフレックスコンテナの先頭に位置します。
flex-endエレメントはフレックスコンテナの端に位置します。
space-betweenエレメントはフレックスコンテナ内で均等に配置され、隣接するエレメント間のスペースが同じになります。
space-aroundエレメントはフレックスコンテナ内で均等に配置され、各エレメントの周囲（つまり前に、間、後ろ）のスペースが同じになります。
stretchエレメントを伸ばしてエラスト性コンテナに適応させます。空きスペースはすべてのエレメント間で均等に分配されます。これはデフォルトの値です。
initialこの属性をデフォルト値に設定します。
inherit指定された場合、関連する要素は親要素の属性の計算値alignを使用します。-content。

ブラウザの互換性

align-content属性はすべての主要ブラウザでサポートされています。数字はその属性をサポートする最初のブラウザのバージョン番号を示します。

  • Firefox 28+

  • Google Chrome21+

  • Internet Explorer 11+

  • Apple Safari 7+ -webkit-

  • Opera 12.1+

注意： Apple Safari 7及びそれ以降のバージョンでalignをサポートしています-content属性ですが、-webkit-プリフィックス、例えば-webkit-align-content: center;

さらに詳しく

以下のチュートリアルを参照してください：CSS アライメント。

関連属性：align-items、align-self、display、flex、flex-basis、flex-direction、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、min-height、min-width、order。

CSS3 align-items 属性