W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
用于同時(shí)控制內(nèi)容如何在水平和垂直方向上對(duì)齊的功能類
Class
|
Properties
|
---|---|
place-content-center | place-content: center; |
place-content-start | place-content: start; |
place-content-end | place-content: end; |
place-content-between | place-content: space-between; |
place-content-around | place-content: space-around; |
place-content-evenly | place-content: space-evenly; |
place-content-stretch | place-content: stretch; |
使用 ?place-content-center
? 將項(xiàng)目定位在塊軸的中心:
<div class="grid grid-cols-3 gap-2 place-content-center h-48 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
使用 ?place-content-start
? 將項(xiàng)目沿著塊軸的起點(diǎn)對(duì)齊:
<div class="grid grid-cols-3 gap-2 place-content-start h-48 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
使用 ?place-content-end
? 將項(xiàng)目沿著塊軸的終點(diǎn)對(duì)齊:
<div class="grid grid-cols-3 gap-2 place-content-end h-48 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
使用 ?place-content-between
? 沿塊軸分布網(wǎng)格項(xiàng),使塊軸上的每行之間有相等的空間:
<div class="grid grid-cols-3 gap-2 place-content-between h-48 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
使用 ?place-content-around
? 分配網(wǎng)格項(xiàng)目,使塊軸上的每行周圍有相等的空間:
<div class="grid grid-cols-3 gap-2 place-content-around h-48 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
使用 ?place-content-evenly
? 來分配網(wǎng)格項(xiàng),使它們?cè)趬K軸上的間距相等。
<div class="grid grid-cols-3 gap-2 place-content-evenly h-48 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
使用 ?place-content-stretch
? 在塊軸上沿其網(wǎng)格區(qū)域拉伸網(wǎng)格項(xiàng)。
<div class="grid grid-cols-3 gap-2 place-content-stretch h-48 ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
要在特定的斷點(diǎn)放置內(nèi)容,可以在任何現(xiàn)有的 ?place-content
? 功能類前添加 ?{screen}:
? 前綴。例如,使用 ?md:place-content-center
? 來僅在中等尺寸及以上的屏幕應(yīng)用 ?place-content-center
? 功能。
<div class="place-content-start md:place-content-center">
<!-- ... -->
</div>
關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息,請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。
默認(rèn)情況下, 針對(duì) place-content 功能類,只生成 responsive 變體。
您可以通過修改您的 ?tailwind.config.js
? 文件中的 ?variants
?部分中的 ?placeContent
?屬性來控制為 place-content 功能生成哪些變體。
例如,這個(gè)配置也將生成 hover and focus 變體:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
placeContent: ['hover', 'focus'],
}
}
}
如果您不打算在您的項(xiàng)目中使用 place-content 功能,您可以通過在配置文件的 ?corePlugins
?部分將 ?placeContent
?屬性設(shè)置為 ?false
?來完全禁用它們:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
placeContent: false,
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: