Flexbox & Grid
align-items
flexおよびgridアイテムがコンテナのクロス軸に沿ってどのように配置されるかを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
items-start | align-items: flex-start; |
items-end | align-items: flex-end; |
items-end-safe | align-items: safe flex-end; |
items-center | align-items: center; |
items-center-safe | align-items: safe center; |
items-baseline | align-items: baseline; |
items-baseline-last | align-items: last baseline; |
items-stretch | align-items: stretch; |
例
ストレッチ
items-stretchユーティリティを使用して、アイテムをコンテナのクロス軸いっぱいにストレッチします。
01
02
03
<div class="flex items-stretch ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>開始位置
items-startユーティリティを使用して、アイテムをコンテナのクロス軸の開始位置に揃えます。
01
02
03
<div class="flex items-start ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>中央
items-centerユーティリティを使用して、アイテムをコンテナのクロス軸の中央に沿って揃えます。
01
02
03
<div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>終了位置
items-endユーティリティを使用して、アイテムをコンテナのクロス軸の終了位置に揃えます。
01
02
03
<div class="flex items-end ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>ベースライン
items-baselineユーティリティを使用して、すべてのベースラインが揃うように、アイテムをコンテナのクロス軸に沿って揃えます。
01
02
03
<div class="flex items-baseline ..."> <div class="pt-2 pb-6">01</div> <div class="pt-8 pb-12">02</div> <div class="pt-12 pb-4">03</div></div>ラストベースライン
items-baseline-lastユーティリティを使用して、すべてのベースラインがコンテナ内の最後のベースラインと揃うように、アイテムをコンテナのクロス軸に沿って揃えます。
スペンサー・シャープ
Space Recruitで宇宙飛行士採用の未来に取り組んでいます。
アレックス・リード
学際的なデザイナー。
<div class="grid grid-cols-[1fr_auto] items-baseline-last"> <div> <img src="img/spencer-sharp.jpg" /> <h4>Spencer Sharp</h4> <p>Working on the future of astronaut recruitment at Space Recruit.</p> </div> <p>spacerecruit.com</p></div>これは、テキストアイテムの高さが異なっていても、互いに整列するようにする場合に役立ちます。
レスポンシブデザイン
プレフィックスan align-itemsユーティリティ md:のようなブレークポイントバリアントを使用して、ユーティリティを適用するのはmedium 画面サイズ以上
<div class="flex items-stretch md:items-center ..."> <!-- ... --></div>バリアントのドキュメントでバリアントの使用方法について詳しく学んでください。