CSS の justify-self
プロパティは、配置コンテナーの適切な軸に沿って内部でボックスの位置合わせをする方法を設定します。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティの効果は、現在のレイアウトモードに依存します。
構文
/* 基本キーワード */
justify-self: auto;
justify-self: normal;
justify-self: stretch;
/* 位置による配置 */
justify-self: center; /* 中央付近にアイテムを集める */
justify-self: start; /* 開始側にアイテムを集める */
justify-self: end; /* 終端側にアイテムを集める */
justify-self: flex-start; /* 開始側にフレックスアイテムを集める */
justify-self: flex-end; /* 終端側にフレックスアイテムを集める */
justify-self: self-start;
justify-self: self-end;
justify-self: left; /* 左側にアイテムを集める */
justify-self: right; /* 右側にアイテムを集める */
/* ベースラインの配置 */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;
/* あふれたときの配置 (位置による配置時のみ) */
justify-self: safe center;
justify-self: unsafe center;
/* グローバル値 */
justify-self: inherit;
justify-self: initial;
justify-self: unset;
このプロパティは3つの異なる形式のうち1つを取ることができます。
- 基本キーワード: キーワード値
normal
,auto
,stretch
のうちの一つ。 - ベースラインによる配置:
baseline
キーワードに加えて、任意でfirst
又はlast
のどちらか。 - 位置による配置:
center
,start
,end
,flex-start
,flex-end
,self-start
,self-end
,left
,right
のうちの一つ。- 加えて任意で
safe
又はunsafe
。
値
auto
- 使用される値は、ボックスに親があれば、親ボックスの
justify-items
プロパティ、そうでなければ絶対位置であり、このような場合、auto
はnormal
を表します。 normal
- このキーワードの効果は、レイアウトモードに依存します。
- ブロックレベルレイアウトでは、このキーワードは
start
の別名です。 - 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには
start
のように振舞い、その他の絶対位置ボックスにはstretch
のように振舞います。 - 表のセルレイアウトでは、このキーワードは意味を持たず、無視されます。
- フレックスボックスレイアウトでは、このキーワードは意味を持たず、無視されます。
- グリッドレイアウトでは、このキーワードは
stretch
のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスはstart
のように振舞います。
- ブロックレベルレイアウトでは、このキーワードは
start
- アイテムは適切な軸で配置コンテナーの開始側に向かって、互いに接するように詰められます。
end
- アイテムは適切な軸で配置コンテナーの終端側に向かって、互いに接するように詰められます。
flex-start
- フレックスコンテナーの子ではないアイテムにおいては、この値は
start
のように扱われます。 flex-end
- フレックスコンテナーの子ではないアイテムにおいては、この値は
end
のように扱われます。 self-start
- アイテムは適切な軸で、アイテムの開始側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
self-end
- アイテムは適切な軸で、アイテムの終端側にある配置コンテナーの辺に向けて、互いに接するよう詰められます。
center
- アイテムは配置コンテナーの中央で、互いに接するように詰められます。
left
- アイテムは配置コンテナーの左端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行でない場合は、この値は
start
のように動作します。 right
- アイテムは配置コンテナーの右端に向かって、互いに接するように詰められます。プロパティの軸がインライン軸に平行ではない場合は、この値は
start
のように動作します。 baseline
first baseline
last baseline
- first- 又は last-baseline 配置への参加を指定します。ボックスの最初又は最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline
の代替配置はstart
、last baseline
の代替配置はend
です。 stretch
- アイテムの寸法の合計が配置コンテナーの寸法より小さい場合に、寸法が
auto
であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、max-height
/max-width
(あるいは同等の機能) による制限は尊重します。これにより、寸法の合計が配置コンテナーを主軸に沿って完全に埋めるようになります。 safe
- アイテムの寸法が配置コンテナーをあふれた場合、アイテムは配置モードが
start
であったかのように配置されます。 unsafe
- アイテムのと配置コンテナーの寸法の関係にかかわらず、指定した値を尊重します。
形式文法
auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Box Alignment Module Level 3 justify-self の定義 |
草案 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | block-level boxes, absolutely-positioned boxes, and grid items |
継承 | なし |
計算値 | 指定値 |
アニメーションの種類 | 個別 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
BCD tables only load in the browser
グリッドレイアウトでの対応
BCD tables only load in the browser
関連情報
- CSS グリッドガイド: CSS グリッドレイアウトのボックス配置
- CSS ボックス配置
justify-items
プロパティ