- Layout
- display
Layout
display
用於控制元素顯示框類型的通用類別。
| 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; |
範例（Examples）
Block 和 Inline
使用 inline、inline-block 和 block 通用類別來控制文字和元素的流動：
When controlling the flow of text, using the CSS property display: inline will cause the text inside the element to wrap normally.
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.
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
使用 flow-root 通用類別來建立具有自己的區塊格式化上下文的區塊級元素：
Well, let me tell you something, funny boy. Y'know that little stamp, the one that says "New York Public Library"? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot.
Sure, go ahead, laugh if you want to. I've seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you're thinking. What's this guy making such a big stink about old library books? Well, let me give you a hint, junior.
<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
使用 flex 通用類別來建立區塊級 flex 容器：
Andrew AlfredTechnical advisor
<div class="flex items-center"> <img src="path/to/image.jpg" /> <div> <strong>Andrew Alfred</strong> <span>Technical advisor</span> </div></div>Inline Flex
使用 inline-flex 通用類別來建立與文字一起流動的行內 flex 容器：
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
使用 grid 通用類別來建立 grid 容器：
01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-3 grid-rows-3 gap-4"> <!-- ... --></div>Inline Grid
使用 inline-grid 通用類別來建立行內 grid 容器：
01
02
03
04
05
06
01
02
03
04
05
06
<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
使用 contents 通用類別來建立一個「虛擬」容器，其子元素的行為就像父元素的直接子元素：
01
02
03
04
<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
使用 table、table-row、table-cell、table-caption、table-column、table-column-group、table-header-group、table-row-group 和 table-footer-group 通用類別來建立行為類似各自表格元素的元素：
Song
Artist
Year
The Sliding Mr. Bones (Next Stop, Pottersville)
Malcolm Lockyer
1961
Witchy Woman
The Eagles
1972
Shining Star
Earth, Wind, and Fire
1975
<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
使用 hidden 通用類別從文件中移除元素：
01
02
03
<div class="flex ..."> <div class="hidden ...">01</div> <div>02</div> <div>03</div></div>若要在視覺上隱藏元素但保留在文件中，請改用 visibility 屬性。
僅螢幕閱讀器（Screen-reader only）
使用 sr-only 在視覺上隱藏元素，但不對螢幕閱讀器隱藏：
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only">Settings</span></a>使用 not-sr-only 來撤銷 sr-only，使元素對視力正常的使用者和螢幕閱讀器都可見：
<a href="#"> <svg><!-- ... --></svg> <span class="sr-only sm:not-sr-only">Settings</span></a>例如，當你想在小螢幕上視覺隱藏某些內容，但在大螢幕上顯示時，這會很有用。
響應式設計（Responsive design）
在 display 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="flex md:inline-flex ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。