CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

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

justify-content属性は、エラストイボックス要素が主軸（横軸）方向でどのように揃われるかを設定または取得するために使用されます。

このテーブルは、この属性の使用方法とバージョンハイストリと、javascriptスクリプト内での属性の使用法を示しています。

デフォルト値：	flex-start
適用：	エラストイックコンテナ
継承：	ありません
アニメーション可能：	いいえ。参照してくださいアニメーション属性。
バージョン：	CSS3の新機能
JavaScriptの構文：	object.style.justifyContent="space-around"

contentの使用方法の構文を証明

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

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

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

例

.flex-container　{
　　　　　　/*　Safari　*/
　　　　　　display:　-webkit-flex;
　　　　　　-webkit-justify-content:　space-around;
　　　　　　
　　　　　　display:　flex;
　　　　　　justify-content:　space-around;
　　}

テストして‹/›

属性値

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

値	説明
flex-start	エラストイックなアイテムがコンテナ行の先頭に位置します。これはデフォルト値です。
flex-end	エラストイックなアイテムが行の終わりに位置します。
center	アイテムがコンテナの中心に位置します。
space-between	エラストイックなアイテムがラインに沿って均等に配置されます。
space-around	エラストイックなアイテムが均等に配置され、隣接するアイテム間のスペースが同じになります。
initial	この属性をデフォルト値に設定します。
inherit	指定された場合、関連する要素は親要素のjustifyを利用します。-contentの属性値。

ブラウザ互換性

justify-content属性のブラウザの互換性について、以下のテーブルの数字はこの属性をサポートするブラウザの最低バージョンを示します；すべての主要ブラウザはこの属性をサポートしています。

	FireFox 18+ ^-moz-、28+ Google Chrome 21+ ^-webkit-、29+ Internet Explorer 11+ Apple Safari 6。1+ Opera 12。1+

さらに詳しく

以下のチュートリアルを参照してください：CSSフォント、CSS単位、CSS仮要素。

CSS left 属性 CSS height 属性