Các utility để kiểm soát cách các hàng được định vị trong các container flex và grid nhiều hàng.
| Class | Styles |
|---|---|
content-normal | align-content: normal; |
content-center | align-content: center; |
content-start | align-content: flex-start; |
content-end | align-content: flex-end; |
content-between | align-content: space-between; |
content-around | align-content: space-around; |
content-evenly | align-content: space-evenly; |
content-baseline | align-content: baseline; |
content-stretch | align-content: stretch; |
Sử dụng content-start để đóng gói các hàng trong một container về phía bắt đầu của trục chéo (cross axis):
<div class="grid h-56 grid-cols-3 content-start gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Sử dụng content-center để đóng gói các hàng trong một container ở giữa trục chéo:
<div class="grid h-56 grid-cols-3 content-center gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Sử dụng content-end để đóng gói các hàng trong một container về phía cuối của trục chéo:
<div class="grid h-56 grid-cols-3 content-end gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Sử dụng content-between để phân phối các hàng trong một container sao cho có một khoảng cách bằng nhau giữa mỗi dòng:
<div class="grid h-56 grid-cols-3 content-between gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Sử dụng content-around để phân phối các hàng trong một container sao cho có một khoảng cách bằng nhau xung quanh mỗi dòng:
<div class="grid h-56 grid-cols-3 content-around gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Sử dụng content-evenly để phân phối các hàng trong một container sao cho có một khoảng cách bằng nhau xung quanh mỗi item, nhưng cũng tính đến việc gấp đôi khoảng cách mà bạn thường thấy giữa mỗi item khi sử dụng content-around:
<div class="grid h-56 grid-cols-3 content-evenly gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Sử dụng content-stretch để cho phép các content item lấp đầy không gian có sẵn dọc theo trục chéo của container:
<div class="grid h-56 grid-cols-3 content-stretch gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Sử dụng content-normal để đóng gói các content item ở vị trí mặc định của chúng như thể không có giá trị align-content nào được thiết lập:
<div class="grid h-56 grid-cols-3 content-normal gap-4 ..."> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div></div>Prefix an align-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="grid content-start md:content-around ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.