例
可撓性のアイテム配置<div>線との間の空間を持つ要素を：
// Code for Safari 7.0+
document.getElementById("main").style.WebkitAlignContent = "space-between";
// Standard syntax
document.getElementById("main").style.alignContent
= "space-between"; »それを自分で試してみてください 定義と使用法
アイテムはクロス軸上で利用可能なすべてのスペースを使用しないときalignContentプロパティは、フレキシブルコンテナのアイテムを揃え(vertically) 。
ヒント：メイン軸上のアイテムを整列させるためにjustifyContentプロパティを使用して(horizontally) 。
注意：任意の効果を持つために、このプロパティの項目の複数の行が存在する必要があります。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
Webkitのに続く数字は、接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| alignContent | 21.0 | 11.0 | 28.0 | 7.0のWebkit | 12.1 |
注意：Safariは、代替、WebkitAlignContentプロパティをサポート。
構文
alignContentプロパティを返します：
object .style.alignContentalignContentプロパティを設定します。
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 | このプロパティがデフォルト値に設定します。 最初の記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
技術的な詳細
| デフォルト値： | ストレッチ |
|---|---|
| 戻り値： | 要素のALIGN-コンテンツプロパティを表す文字列、 |
| CSSのバージョン | CSS3 |
関連ページ
CSSリファレンス： align-content property
HTML DOMのスタイル参照： alignItems property
HTML DOM STYLE参考： alignSelf property
HTML DOM STYLE参考： justifyContent property
<スタイルオブジェクト