place-self はCSS の一括指定プロパティで、アイテムのブロック軸およびインライン軸に沿ったアイテムの配置 (すなわちalign-self およびjustify-self プロパティ) を一度に指定することができます。このプロパティは、ブロックレベルのボックス、絶対位置指定のボックス、グリッドアイテムに適用されます。 2 番目の値が設定されていない場合、最初の値がそちらにも使用されます。

試してみましょう

place-self: stretch center;

place-self: center start;

place-self: start end;

place-self: end center;

<section>  <div>    <div>One</div>    <div>Two</div>    <div>Three</div>  </div></section>

.example-container {  border: 1px solid #c5c5c5;  display: grid;  width: 220px;  grid-template-columns: 1fr 1fr;  grid-auto-rows: 80px;  grid-gap: 10px;}.example-container > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;}

構成要素のプロパティ

根のプロパティは以下の CSS プロパティの一括指定です。

• align-self
• justify-self

構文

/* キーワード値 */place-self: auto center;place-self: normal start;place-self: center normal;place-self: start auto;place-self: end normal;place-self: self-start auto;place-self: self-end normal;place-self: flex-start auto;place-self: flex-end normal;place-self: anchor-center;/* ベースラインによる配置 */place-self: baseline normal;place-self: first baseline auto;place-self: last baseline normal;place-self: stretch auto;/* グローバル値 */place-self: inherit;place-self: initial;place-self: revert;place-self: revert-layer;place-self: unset;

値

auto

親のalign-items の値で計算します。

normal

このキーワードの効果は、現在のレイアウトモードに依存します。

• 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスにはstart のように動作し、その他の絶対位置ボックスにはstretch のように動作します。
• 絶対位置指定レイアウトの固定位置指定時は、このキーワードはstretch と同様に動作します。
• フレックスアイテムでは、このキーワードはstretch と同様に動作します。
• グリッドアイテムでは、このキーワードはstretch のうちの一つと似た動作をしますが、アスペクト比や内在的な寸法を持つボックスはstart のように動作します。
• ブロックレベルボックスと表のセルでは、プロパティは適用されません。

self-start

アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。

self-end

アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。

flex-start

このフレックスアイテムの交差軸の先頭側マージンが、行の交差軸の先頭側に詰められます。

flex-end

このフレックスアイテムの交差軸の末尾側マージンが、行の交差軸の末尾側に詰められます。

center

このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。

baseline,first baseline.last baseline

first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。first baseline の代替配置はstart、last baseline の代替配置はend です。

stretch

アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法がauto であった場合、アイテムの寸法はmax-height/max-width (または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、auto が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。

anchor-center

アンカー位置指定要素の場合、関連付けられたアンカー要素のブロックおよびインライン方向の中心にアイテムを配置します。anchor-center を使用してアンカーの中央に配置を参照してください。

公式定義

形式文法

place-self =
<'align-self'><'justify-self'>?

<align-self> =
auto|
<overflow-position>?[normal|<self-position>]|
stretch|
<baseline-position>|
anchor-center

<justify-self> =
auto|
<overflow-position>?[normal|<self-position>|left|right]|
stretch|
<baseline-position>|
anchor-center

<overflow-position> =
unsafe|
safe

<self-position> =
center|
start|
end|
self-start|
self-end|
flex-start|
flex-end

<baseline-position> =
[first|last]?&&
baseline

例

基本的なデモ

以下の例では 2 x 2 のグリッドレイアウトを用意しました。最初にグリッドコンテナーにはjustify-items およびalign-items の値をstretch — 既定値 — に設定し、グリッドアイテムがセルの幅全体に広がるようにしています。

2 番目、3 番目、4 番目のグリッドアイテムは、別々なplace-self の値を指定し、これらが既定の配置をオーバーライドする様子を表示します。これらの値はグリッドアイテムの幅や高さを内容物の幅や高さに設定し、セルごとにブロック方向とインライン方向の両方で異なる位置に配置しています。

HTML

<article>  <span>First</span>  <span>Second</span>  <span>Third</span>  <span>Fourth</span></article>

CSS

html {  font-family: "Helvetica", "Arial", sans-serif;  letter-spacing: 1px;}article {  background-color: red;  display: grid;  grid-template-columns: 1fr 1fr;  grid-auto-rows: 80px;  grid-gap: 10px;  margin: 20px;  width: 300px;}span:nth-child(2) {  place-self: start center;}span:nth-child(3) {  place-self: center start;}span:nth-child(4) {  place-self: end;}article span {  background-color: black;  color: white;  margin: 1px;  text-align: center;}article,span {  padding: 10px;  border-radius: 7px;}

結果

仕様書

ブラウザーの互換性

関連情報

• align-self
• justify-self
• フレックスボックスの基本概念
• フレックスコンテナー内のアイテムの配置
• グリッドレイアウトのボックス配置
• CSS ボックス配置モジュール