W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
控制 Flex 子項的方向的功能類
Class
|
Properties
|
---|---|
flex-row | flex-direction: row; |
flex-row-reverse | flex-direction: row-reverse; |
flex-col | flex-direction: column; |
flex-col-reverse | flex-direction: column-reverse; |
使用 ?flex-row
? 用來沿與文本相同的方向水平放置 flex 子項。
<div class="flex flex-row ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
使用 ?flex-row
? 用來沿與文本相反的方向水平放置 flex 子項。
<div class="flex flex-row-reverse ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
使用 ?flex-col
? 用來沿垂直方向放置 flex 子項。
<div class="flex flex-col ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
使用 ?flex-col-reverse
? 用來沿垂直方向反向放置 flex 子項。
<div class="flex flex-col-reverse ...">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
要僅在特定的斷點處應(yīng)用 flex direction 功能類,請在現(xiàn)有的類名稱上添加 ?{screen}:
? 前綴。例如,將類 ?md:flex-row
? 添加到元素上,將在中等尺寸及以上的屏幕上應(yīng)用 ?flex-row
? 功能類。
<div class="flex flex-col md:flex-row ...">
<!-- ... -->
</div>
默認情況下, 針對 flex-direction 功能類,只生成 responsive 變體。
您可以通過修改您的 ?tailwind.config.js
? 文件中的 ?variants
?部分中的 ?flexDirection
?屬性來控制為 flex-direction 功能生成哪些變體。
例如,這個配置也將生成 hover and focus 變體:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
flexDirection: ['hover', 'focus'],
}
}
}
如果您不打算在您的項目中使用 flex-direction 功能,您可以通過在配置文件的 ?corePlugins
?部分將 ?flexDirection
?屬性設(shè)置為 ?false
?來完全禁用它們:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
flexDirection: false,
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: