佈局
display
用於控制元素顯示方塊類型的實用工具。
| 類別 | 樣式 |
|---|---|
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: rect(0, 0, 0, 0); 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; |
範例
區塊和內聯
使用 inline、inline-block 和 block 實用工具來控制文字和元素的流動
在控制文字流動時，使用 CSS 屬性 display: inline 會導致元素內的文字正常換行。
而使用屬性 display: inline-block 會將元素包覆起來，以防止內部的文字超出其父元素。
最後，使用屬性 display: block 會將元素放在自己的行上並填滿其父元素。
而使用屬性 display: inline-block 會將元素包覆起來，以防止內部的文字超出其父元素。
最後，使用屬性 display: block 會將元素放在自己的行上並填滿其父元素。
<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 實用工具來建立具有自己區塊格式化上下文的區塊級元素
好吧，讓我告訴你一些事情，有趣的傢伙。你知道那個小印章，上面寫著「紐約公共圖書館」嗎？好吧，這對你來說可能沒有任何意義，但對我來說意義重大。非常重要。
當然，如果你想笑就笑吧。我以前看過你這種人：花枝招展，引人注目，炫耀傳統。是啊，我知道你在想什麼。這傢伙為什麼要為了舊的圖書館書籍這麼大驚小怪？好吧，讓我給你一個提示，小傢伙。
<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 實用工具來建立區塊級彈性容器
安德魯·阿爾弗雷德技術顧問
<div class="flex items-center"> <img src="path/to/image.jpg" /> <div> <strong>Andrew Alfred</strong> <span>Technical advisor</span> </div></div>內聯彈性
使用 inline-flex 實用工具來建立隨文字流動的內聯彈性容器
今天我大部分時間都在研究如何利用密西根州可以退還 10 美分瓶子，而這裡只有 5 美分的事實。
<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 工具類來建立網格容器
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 工具類來建立行內網格容器
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 工具類來建立行為如同其各自表格元素的元素
歌曲
演出者
年份
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>當您想在小螢幕上視覺隱藏某些內容，但在大螢幕上顯示它時，這可能會很有用。
響應式設計
前綴 (Prefix)a display 工具類 與斷點變體 (breakpoint variant) 結合，例如 md: 來僅在中型 螢幕尺寸或以上應用該工具類
<div class="flex md:inline-flex ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
