display
Các utility để kiểm soát kiểu hộp hiển thị của một phần tử.
| Class | Styles |
|---|---|
inline | display: inline; |
block | display: block; |
inline-block | display: inline-block; |
flow-root | display: flow-root; |
flex | display: flex; |
inline-flex | display: inline-flex; |
grid | display: grid; |
inline-grid | display: inline-grid; |
contents | display: contents; |
table | display: table; |
inline-table | display: inline-table; |
table-caption | display: table-caption; |
table-cell | display: table-cell; |
table-column | display: table-column; |
table-column-group | display: table-column-group; |
table-footer-group | display: table-footer-group; |
table-header-group | display: table-header-group; |
table-row-group | display: table-row-group; |
table-row | display: table-row; |
list-item | display: list-item; |
hidden | display: none; |
sr-only | position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border-width: 0; |
not-sr-only | position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal; |
Ví dụ
Block và Inline
Sử dụng các utility inline, inline-block, và block để kiểm soát luồng văn bản và các phần tử:
While using the property display: inline-block will wrap the element to prevent the text inside from extending beyond its parent.
Lastly, using the property display: block will put the element on its own line and fill its parent.
<p> When controlling the flow of text, using the CSS property <span class="inline">display: inline</span> will cause the text inside the element to wrap normally.</p><p> While using the property <span class="inline-block">display: inline-block</span> will wrap the element to prevent the text inside from extending beyond its parent.</p><p> Lastly, using the property <span class="block">display: block</span> will put the element on its own line and fill its parent.</p>Flow Root
Sử dụng utility flow-root để tạo một phần tử cấp block với ngữ cảnh định dạng block riêng của nó:
<div class="p-4"> <div class="flow-root ..."> <div class="my-4 ...">Well, let me tell you something, ...</div> </div> <div class="flow-root ..."> <div class="my-4 ...">Sure, go ahead, laugh if you want...</div> </div></div>Flex
Sử dụng utility flex để tạo một flex container cấp block:
<div class="flex items-center"> <img src="path/to/image.jpg" /> <div> <strong>Andrew Alfred</strong> <span>Technical advisor</span> </div></div>Inline Flex
Sử dụng utility inline-flex để tạo một inline flex container chảy cùng với văn bản:
Today I spent most of the day researching ways to take advantage of the fact that bottles can be returned for 10 cents in Michigan, but only 5 cents here.
<p> Today I spent most of the day researching ways to ... <span class="inline-flex items-baseline"> <img src="/img/kramer.jpg" class="mx-1 size-5 self-center rounded-full" /> <span>Kramer</span> </span> keeps telling me there is no way to make it work, that ...</p>Grid
Sử dụng utility grid để tạo một grid container:
<div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>Inline Grid
Sử dụng utility inline-grid để tạo một inline grid container:
<span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span><span class="inline-grid grid-cols-3 gap-4"> <span>01</span> <span>02</span> <span>03</span> <span>04</span> <span>05</span> <span>06</span></span>Contents
Sử dụng utility contents để tạo một container "ảo" mà các phần tử con của nó hoạt động như các phần tử con trực tiếp của phần tử cha:
<div class="flex ..."> <div class="flex-1 ...">01</div> <div class="contents"> <div class="flex-1 ...">02</div> <div class="flex-1 ...">03</div> </div> <div class="flex-1 ...">04</div></div>Table
Sử dụng các utility table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, và table-footer-group để tạo các phần tử hoạt động giống như các phần tử table tương ứng của chúng:
<div class="table w-full ..."> <div class="table-header-group ..."> <div class="table-row"> <div class="table-cell text-left ...">Song</div> <div class="table-cell text-left ...">Artist</div> <div class="table-cell text-left ...">Year</div> </div> </div> <div class="table-row-group"> <div class="table-row"> <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div> <div class="table-cell ...">Malcolm Lockyer</div> <div class="table-cell ...">1961</div> </div> <div class="table-row"> <div class="table-cell ...">Witchy Woman</div> <div class="table-cell ...">The Eagles</div> <div class="table-cell ...">1972</div> </div> <div class="table-row"> <div class="table-cell ...">Shining Star</div> <div class="table-cell ...">Earth, Wind, and Fire</div> <div class="table-cell ...">1975</div> </div> </div></div>Hidden
Sử dụng utility hidden để loại bỏ một phần tử khỏi tài liệu:
<div class="flex ..."> <div class="hidden ...">01</div> <div>02</div> <div>03</div></div>Để ẩn trực quan một phần tử nhưng vẫn giữ nó trong tài liệu, hãy sử dụng thuộc tính visibility thay thế.
Chỉ dành cho trình đọc màn hình
Sử dụng sr-only để ẩn một phần tử trực quan mà không ẩn nó khỏi trình đọc màn hình:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only">Settings</span></a>Sử dụng not-sr-only để hoàn tác sr-only, làm cho một phần tử hiển thị với người dùng có thị lực cũng như trình đọc màn hình:
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Settings</span></a>Điều này có thể hữu ích khi bạn muốn ẩn trực quan một thứ gì đó trên màn hình nhỏ nhưng hiển thị nó trên màn hình lớn hơn chẳng hạn.
Thiết kế phản hồi
Prefix a display utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="flex md:inline-flex ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.