align-items
Các utility để kiểm soát cách các flex và grid item được định vị dọc theo trục chéo của container.
| Class | Styles |
|---|---|
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; |
Ví dụ
Stretch
Sử dụng utility items-stretch để kéo giãn các item để lấp đầy trục chéo của container:
<div class="flex items-stretch ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Start
Sử dụng utility items-start để căn chỉnh các item về phía bắt đầu của trục chéo của container:
<div class="flex items-start ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Center
Sử dụng utility items-center để căn chỉnh các item dọc theo trung tâm của trục chéo của container:
<div class="flex items-center ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>End
Sử dụng utility items-end để căn chỉnh các item về phía cuối của trục chéo của container:
<div class="flex items-end ..."> <div class="py-4">01</div> <div class="py-12">02</div> <div class="py-8">03</div></div>Baseline
Sử dụng utility items-baseline để căn chỉnh các item dọc theo trục chéo của container sao cho tất cả các đường cơ sở (baseline) của chúng thẳng hàng:
<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>Last baseline
Sử dụng utility items-baseline-last để căn chỉnh các item dọc theo trục chéo của container sao cho tất cả các đường cơ sở của chúng thẳng hàng với đường cơ sở cuối cùng trong container:
Working on the future of astronaut recruitment at Space Recruit.
A multidisciplinary designer.
<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>Điều này hữu ích để đảm bảo rằng các item văn bản thẳng hàng với nhau, ngay cả khi chúng có chiều cao khác nhau.
Thiết kế phản hồi
Prefix an align-items utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="flex items-stretch md:items-center ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.