スタイルjustifyContentプロパティ
例
柔軟な<div>要素の項目の間にスペースを作ります。
document.getElementById("main").style.justifyContent = "space-between";
定義と使用法
justifyContentプロパティは、アイテムが主軸上で使用可能なすべてのスペースを(水平方向に)使用しない場合に、フレキシブルコンテナのアイテムを整列させます。
ヒント: alignContentプロパティを使用して、アイテムを交差軸上に(垂直方向に)配置します。
ブラウザのサポート
Property | |||||
---|---|---|---|---|---|
justifyContent | Yes | 12.0 | Yes | 9.0 | Yes |
構文
justifyContentプロパティを返します。
object.style.justifyContent
justifyContentプロパティを設定します。
object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"
プロパティ値
Value | Description |
---|---|
flex-start | Default value. Items are positioned at the beginning of the container |
flex-end | Items are positioned at the end of the container |
center | Items are positioned at the center of the container |
space-between | Items are positioned with space between the lines |
space-around | Items are positioned with space before, between, and after the lines |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
技術的な詳細
デフォルト値: | フレックススタート |
---|---|
戻り値: | 要素のjustify-contentプロパティを表す文字列 |
CSSバージョン | CSS3 |
関連ページ
CSSリファレンス:justify-contentプロパティ
HTML DOM STYLEリファレンス:alignContentプロパティ
HTML DOM STYLEリファレンス:alignItemsプロパティ
HTML DOM STYLEリファレンス:alignSelfプロパティ
❮スタイルオブジェクト