用于控制在多行 flex 和网格容器中行的位置的功能类。
<div class="h-48 flex flex-wrap content-start ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="h-48 flex flex-wrap content-center ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="h-48 flex flex-wrap content-end ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="h-48 flex flex-wrap content-between ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="h-48 flex flex-wrap content-around ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
Use content-evenly
to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using content-around
:
<div class="h-48 flex flex-wrap content-evenly ...">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
要在特定的断点处控制 flex 内容的对齐,可以在任何现有的功能类前添加 {screen}:
前缀。例如,使用 md:content-around
来仅在中等尺寸及以上的屏幕应用 content-around
功能。
<div class="content-start md:content-around ...">
<!-- ... -->
</div>
关于 Tailwind 的响应式设计功能的更多信息,请查看 响应式设计 文档。
默认情况下, 针对 align-content 功能类,只生成 responsive 变体。
您可以通过修改您的 tailwind.config.js
文件中的 variants
部分中的 alignContent
属性来控制为 align-content 功能生成哪些变体。
例如,这个配置也将生成 hover and focus 变体:
// tailwind.config.js
module.exports = {
variants: {
extend: {
// ...
+ alignContent: ['hover', 'focus'],
}
}
}
如果您不打算在您的项目中使用 align-content 功能,您可以通过在配置文件的 corePlugins
部分将 alignContent
属性设置为 false
来完全禁用它们:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ alignContent: false,
}
}