align-self
Các utility để kiểm soát cách một flex hoặc grid item riêng lẻ được định vị dọc theo trục chéo của container của nó.
| Class | Styles |
|---|---|
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-last | align-self: last baseline; |
Ví dụ
Auto
Sử dụng utility self-auto để căn chỉnh một item dựa trên giá trị của thuộc tính align-items của container:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-auto ...">02</div> <div>03</div></div>Start
Sử dụng utility self-start để căn chỉnh một item về phía bắt đầu của trục chéo của container, bất kể giá trị align-items của container:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-start ...">02</div> <div>03</div></div>Center
Sử dụng utility self-center để căn chỉnh một item dọc theo trung tâm của trục chéo của container, bất kể giá trị align-items của container:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-center ...">02</div> <div>03</div></div>End
Sử dụng utility self-end để căn chỉnh một item về phía cuối của trục chéo của container, bất kể giá trị align-items của container:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-end ...">02</div> <div>03</div></div>Stretch
Sử dụng utility self-stretch để kéo giãn một item để lấp đầy trục chéo của container, bất kể giá trị align-items của container:
<div class="flex items-stretch ..."> <div>01</div> <div class="self-stretch ...">02</div> <div>03</div></div>Baseline
Sử dụng utility self-baseline để căn chỉnh một item sao cho đường cơ sở của nó thẳng hàng với đường cơ sở của trục chéo của flex container:
<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
Sử dụng utility self-baseline-last để căn chỉnh một item dọc theo trục chéo của container sao cho đường cơ sở của nó thẳng hàng với đường cơ sở cuối cùng trong container:
<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>Đ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-self utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="self-auto md:self-end ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.