Space Between 空间之间
控制子元素之间的间距的实用工具。
| Class | Properties |
|---|
基本用法
在子元素之间添加水平间距
使用 space-x-{amount} 实用工具来控制元素之间的水平间距。
<div class="flex space-x-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>在子元素之间添加垂直间距
使用 space-y-{amount} 实用程序控制元素之间的垂直空间。
<div class="flex flex-col space-y-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>反转子元素顺序
如果您的元素顺序相反（例如使用 flex-row-reverse 或 flex-col-reverse ），请使用 space-x-reverse 或 space-y-reverse 工具确保空格被添加到每个元素的正确侧边。
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>使用负值
要使用负空间值，需要在类名前加上破折号，将其转换为负值。
<div class="flex -space-x-4 ...">
<!-- ... -->
</div>限制
这些实用程序实际上只是为组中除第一个项目之外的所有项目添加边距的快捷方式，并且并不适用于处理像网格、换行布局或子元素按照复杂的自定义顺序而不是它们的自然 DOM 顺序呈现的复杂情况。
对于这些情况，最好在可能的情况下使用间隙实用程序，或者在父元素上为每个元素添加边距，并使用匹配的负边距。
<div class="flow-root">
<div class="-m-2 flex flex-wrap">
<div class="m-2 ..."></div>
<div class="m-2 ..."></div>
<div class="m-2 ..."></div>
</div>
</div>不能与分割实用程序配对
space-* 实用程序不是设计与分割实用程序一起使用的。对于这些情况，考虑为子元素添加边距/填充实用程序。
有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:space-x-8 只在悬停时应用 space-x-8 实用程序。
<div class="flex space-x-2 hover:space-x-8">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:space-x-8 仅在中等屏幕尺寸及以上应用 space-x-8 实用程序。
<div class="flex space-x-2 md:space-x-8">
<!-- ... -->
</div>要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修改器的文档。
使用自定义值
自定义您的主题
默认情况下，Tailwind 的间距比例尺使用默认的间距比例尺。您可以通过编辑您的 tailwind.config.js 文件中的 theme.spacing 或 theme.extend.spacing 来自定义您的间距比例尺。
module.exports = {
theme: {
extend: {
spacing: {
'5px': '5px',
}
}
}
}或者，您可以通过编辑您的 tailwind.config.js 文件中的 theme.space 或 theme.extend.space 来自定义空间比例。
module.exports = {
theme: {
extend: {
space: {
'5px': '5px',
}
}
}
}了解有关在主题自定义文档中自定义默认主题的更多信息。
任意值
如果您需要使用一次性 space-{x|y} 值，而这个值在您的主题中没有意义，可以使用方括号来使用任意值动态生成属性。
<div class="space-y-[5px]">
<!-- ... -->
</div>了解有关任意值支持的更多信息，请参阅任意值文档。