CSSjustify -contentプロパティ
例
フレックスアイテムをコンテナの中央に配置します。
div
{
display: flex;
justify-content: center;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
アイテムが主軸のjustify-content
使用可能なスペースをすべて(水平方向に)使用しない場合、プロパティはフレキシブルコンテナのアイテムを整列します。
ヒント:align-itemsプロパティを使用して、アイテムを垂直方向に整列させます。
デフォルト値: | フレックススタート |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.justifyContent = "space-between" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
justify-content | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
CSS構文
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
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 in the center of the container | |
space-between | Items will have space between them | |
space-around | Items will have space before, between, and after them | |
space-evenly | Items will have equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
フレックスアイテムをコンテナの先頭に揃えます(これはデフォルトです)。
div
{
display: flex;
justify-content: flex-start;
}
例
コンテナの端にフレックスアイテムを配置します。
div
{
display: flex;
justify-content: flex-end;
}
例
行の間にスペースを入れてフレックスアイテムを表示します。
div
{
display: flex;
justify-content: space-between;
}
例
行の前、間、および後にスペースを入れてフレックスアイテムを表示します。
div
{
display: flex;
justify-content: space-around;
}
関連ページ
CSSリファレンス:align-contentプロパティ
CSSリファレンス:align-itemsプロパティ
CSSリファレンス:align-selfプロパティ
HTML DOMリファレンス:justifyContentプロパティ