Flexbox & Grid
align-self
個々の flex または grid アイテムが、コンテナーのクロス軸に沿ってどのように配置されるかを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
self-auto | align-self: auto; |
self-start | align-self: flex-start; |
self-end | align-self: flex-end; |
self-end-safe | align-self: safe flex-end; |
self-center | align-self: center; |
self-center-safe | align-self: safe center; |
self-stretch | align-self: stretch; |
self-baseline | align-self: baseline; |
self-baseline | align-self: last baseline; |
例
Auto
self-auto ユーティリティを使用して、コンテナーの align-items プロパティの値に基づいてアイテムを配置します。
<div class="flex items-stretch ..."> <div>01</div> <div class="self-auto ...">02</div> <div>03</div></div>Start
self-start ユーティリティを使用して、コンテナーの align-items の値に関係なく、アイテムをコンテナーのクロス軸の始点に配置します。
<div class="flex items-stretch ..."> <div>01</div> <div class="self-start ...">02</div> <div>03</div></div>Center
self-center ユーティリティを使用して、コンテナーの align-items の値に関係なく、アイテムをコンテナーのクロス軸の中央に配置します。
<div class="flex items-stretch ..."> <div>01</div> <div class="self-center ...">02</div> <div>03</div></div>End
self-end ユーティリティを使用して、コンテナーの align-items の値に関係なく、アイテムをコンテナーのクロス軸の終点に配置します。
<div class="flex items-stretch ..."> <div>01</div> <div class="self-end ...">02</div> <div>03</div></div>Stretch
self-stretch ユーティリティを使用して、コンテナーの align-items の値に関係なく、アイテムをコンテナーのクロス軸いっぱいに引き伸ばします。
<div class="flex items-stretch ..."> <div>01</div> <div class="self-stretch ...">02</div> <div>03</div></div>Baseline
self-baseline ユーティリティを使用して、アイテムのベースラインが flex コンテナーのクロス軸のベースラインと揃うようにアイテムを配置します。
<div class="flex ..."> <div class="self-baseline pt-2 pb-6">01</div> <div class="self-baseline pt-8 pb-12">02</div> <div class="self-baseline pt-12 pb-4">03</div></div>Last baseline
self-baseline-last ユーティリティを使用して、アイテムのベースラインがコンテナー内の最後のベースラインと揃うように、アイテムをコンテナーのクロス軸に沿って配置します。
<div class="grid grid-cols-[1fr_auto]"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Spencer Sharp</h4> <p class="self-baseline-last">Working on the future of astronaut recruitment at Space Recruit.</p> </div> <p class="self-baseline-last">spacerecruit.com</p></div>これは、テキストアイテムの高さが異なる場合でも、互いに整列させるのに役立ちます。
レスポンシブデザイン
プレフィックスan align-self ユーティリティ md: のようなブレークポイントバリアントを使用して、ユーティリティを適用する範囲をmedium 以上の画面サイズに限定します。
<div class="self-auto md:self-end ..."> <!-- ... --></div>バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。