justify-self

個々のグリッドアイテムがインライン軸に沿ってどのように配置されるかを制御するためのユーティリティ。

クラススタイル

justify-self-auto

justify-self: auto;

justify-self-start

justify-self: start;

justify-self-center

justify-self: center;

justify-self-center-safe

justify-self: safe center;

justify-self-end

justify-self: end;

justify-self-end-safe

justify-self: safe end;

justify-self-stretch

justify-self: stretch;

例

justify-self-autoユーティリティを使用して、グリッドのjustify-itemsプロパティの値に基づいてアイテムを配置します。

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
</div>

justify-self-startユーティリティを使用して、グリッドアイテムをインライン軸の開始位置に配置します。

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
</div>

justify-self-centerまたはjustify-self-center-safeユーティリティを使用して、グリッドアイテムをインライン軸の中央に沿って配置します。

コンテナのサイズを変更して、配置の動作を確認してください。

justify-center-end

justify-self-center-safe

justify-self-center

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>

justify-self-center-safe

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center-safe ...">02</div>
  <!-- ... -->
</div>

十分なスペースがない場合、justify-self-center-safeユーティリティは、アイテムを終端ではなくコンテナの始端に配置します。

justify-self-endまたはjustify-self-end-safeユーティリティを使用して、グリッドアイテムをインライン軸の終端に配置します。

コンテナのサイズを変更して、配置の動作を確認してください。

justify-self-end

justify-self-end-safe

justify-self-end

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
</div>

justify-self-end-safe

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end-safe ...">02</div>
  <!-- ... -->
</div>

十分なスペースがない場合、justify-self-end-safeユーティリティは、アイテムを終端ではなくコンテナの始端に配置します。

justify-self-stretchユーティリティを使用して、グリッドアイテムをインライン軸上のグリッド領域全体に引き伸ばします。

<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
</div>

プレフィックスa justify-selfユーティリティ md:のようなブレークポイントバリアントとともに使用して、ユーティリティを適用するmedium 画面サイズ以上

<div class="justify-self-start md:justify-self-end ...">
  <!-- ... -->
</div>

バリアントのドキュメントで、バリアントの使用方法の詳細をご覧ください。