Style alignContent 属性
- 前のページ alignContent
- 次のページ alignItems
- 上一层に戻る HTML DOM Styleオブジェクト
定義と使用法
プロジェクトが横軸上（垂直）のすべての利用可能なスペースを使用していない場合、alignContent 属性でフレックスコンテナのプロジェクトをアライメントします。
ヒント：使用してください justifyContent 属性 主軸上（水平）にプロジェクトをアライメントします。
注：この属性が有効になるためには、複数の行のプロジェクトが必要です。
例
フレックス <div> 要素のプロジェクトをスペースのある行間に配置します：
document.getElementById("main").style.alignContent = "space-between";
構文
alignContent 属性を返す：
object.style.alignContent
alignContent 属性を設定する：
object.style.alignContent = "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 |
|---|---|
| 返り値： | 文字列、要素の align-content 属性。 |
| CSS バージョン： | CSS3 |
ブラウザサポート
alignContent CSS3 (1999) 特性です。
すべてのブラウザで完全にサポートされています：
| Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera | IE |
| サポート | サポート | サポート | サポート | サポート | 11 |
関連ページ
CSS リファレンスマニュアル：align-content 属性
HTML DOM STYLE リファレンスマニュアル：alignItems 属性
HTML DOM STYLE リファレンスマニュアル：alignSelf 属性
HTML DOM STYLE リファレンスマニュアル：justifyContent 属性
- 前のページ alignContent
- 次のページ alignItems
- 上一层に戻る HTML DOM Styleオブジェクト
