justify-content CSS プロパティとは
トピック：フレキシブルな長さと自動マージンが解決された後、flex アイテム がフレックスコンテナの主軸に沿ってどのように整列するかを指定する、事ができる
プロパティ justify-content
基本 書式：セレクタ {justify-content:値;}
実例 コード 1
フレックスアイテムをコンテナの中央に揃える。サンプル コードを試す div {
display: flex;
justify-content: center;
}
プロパティ 定義と使用法
| デフォルト値・初期値 : | normal |
|---|
| 適用対象 : | flex containers |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.justifyContent="funWebref" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
flex-start | Flexアイテムは、行の先頭に向かって配置 される これはデフォルト値です。 |
flex-end | Flexアイテムは、行末に配置 される |
center | Flexアイテムは、ラインの中心に向かって配置 される |
space-between | フレックスアイテムは、ラインに沿って均等に分配される |
space-around | Flexアイテムは、隣接する2つのアイテム間のスペースが同じになるように均等に分散されています。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| justify-content | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯52 | フルサポート◯12 | フルサポート◯20 | フルサポート◯11 | フルサポート◯12.1 | フルサポート◯9 |
|---|
space-evenly | フルサポート◯60 | サポートなし✖ | フルサポート◯52 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
start ,end | フルサポート◯あり | サポートなし✖ | フルサポート◯あり | サポートなし✖ | フルサポート◯あり | 不明 |
|---|
left ,right | フルサポート◯あり | サポートなし✖ | フルサポート◯52 | フルサポート◯あり | フルサポート◯あり | 不明 |
|---|
baseline | フルサポート◯57 | サポートなし✖ | 未対応 不明— 60 | サポートなし✖ | 不明 | 不明 |
|---|
first baseline ,last baseline | サポートなし✖ | サポートなし✖ | 未対応 52— 60 | サポートなし✖ | サポートなし✖ | 不明 |
|---|
stretch | フルサポート◯57 | サポートなし✖ | フルサポート◯52 | サポートなし✖ | フルサポート◯44 | 不明 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| justify-content | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯52 | フルサポート◯52 | フルサポート◯あり | 不明 | フルサポート◯12.1 | 不明 | フルサポート◯あり |
|---|
space-evenly | サポートなし✖ | サポートなし✖ | サポートなし✖ | フルサポート◯52 | サポートなし✖ | サポートなし✖ | サポートなし✖ |
|---|
start ,end | 不明 | 不明 | 不明 | 不明 | 不明 | 不明 | 不明 |
|---|
left ,right | 不明 | 不明 | 不明 | フルサポート◯52 | 不明 | 不明 | 不明 |
|---|
baseline | 不明 | 不明 | サポートなし✖ | 未対応 不明— 60 | 不明 | 不明 | 不明 |
|---|
first baseline ,last baseline | 不明 | 不明 | サポートなし✖ | 未対応 52— 60 | 不明 | 不明 | サポートなし✖ |
|---|
stretch | 不明 | 不明 | サポートなし✖ | フルサポート◯52 | 不明 | 不明 | 不明 |
|---|
CSS justify-content | CSS プロパティ 値| 意味 使い方 実例 – WebRef