间距
用于控制子元素之间空间的工具。
¥Basic usage
¥Add horizontal space between children
使用 space-x-*
工具来控制元素之间的水平间距。
¥Use the space-x-*
utilities to control the horizontal space between elements.
<div class="flex space-x-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
¥Add vertical space between children
使用 space-y-*
工具来控制元素之间的垂直空间。
¥Use the space-y-*
utilities to control the vertical space between elements.
<div class="flex flex-col space-y-4 ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
¥Reversing children order
如果你的元素顺序相反(例如使用 flex-row-reverse
或 flex-col-reverse
),请使用 space-x-reverse
或 space-y-reverse
工具确保将空格添加到每个元素的正确一侧。
¥If your elements are in reverse order (using say flex-row-reverse
or flex-col-reverse
), use the space-x-reverse
or space-y-reverse
utilities to ensure the space is added to the correct side of each element.
<div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
¥Using negative values
要使用负空格值,请在类名前加上破折号以将其转换为负值。
¥To use a negative space value, prefix the class name with a dash to convert it to a negative value.
<div class="flex -space-x-4 ...">
<!-- ... -->
</div>
¥Limitations
这些工具实际上只是为组中除第一项之外的所有项添加边距的快捷方式,并非旨在处理复杂情况,例如网格、环绕布局或子项在复杂环境中渲染的情况 自定义顺序而不是它们的自然 DOM 顺序。
¥These utilities are really just a shortcut for adding margin to all-but-the-first-item in a group, and aren’t designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.
对于这些情况,最好尽可能使用 差距实用工具,或者为父元素上具有匹配负边距的每个元素添加边距:
¥For those situations, it’s better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent:
<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>
¥Cannot be paired with divide utilities
space-*
工具并非设计用于与 划分实用工具 一起使用。对于这些情况,请考虑向子项添加边距/填充工具。
¥The space-*
utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:space-x-8
to only apply the space-x-8
utility on hover.
<div class="flex space-x-2 hover:space-x-8">
<!-- ... -->
</div>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:space-x-8
to apply the space-x-8
utility at only medium screen sizes and above.
<div class="flex space-x-2 md:space-x-8">
<!-- ... -->
</div>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
¥Using custom values
¥Customizing your theme
默认情况下,Tailwind 的空间比例使用 默认间距比例。你可以通过编辑 tailwind.config.js
文件中的 theme.spacing
或 theme.extend.spacing
来自定义间距比例。
¥By default, Tailwind’s space scale uses the default spacing scale. You can customize your spacing scale by editing theme.spacing
or theme.extend.spacing
in your tailwind.config.js
file.
module.exports = {
theme: {
extend: {
spacing: {
'5px': '5px',
}
}
}
}
或者,你可以通过编辑 tailwind.config.js
文件中的 theme.space
或 theme.extend.space
来自定义空间比例。
¥Alternatively, you can customize just the space scale by editing theme.space
or theme.extend.space
in your tailwind.config.js
file.
module.exports = {
theme: {
extend: {
space: {
'5px': '5px',
}
}
}
}
在 主题定制 文档中了解有关自定义默认主题的更多信息。
¥Learn more about customizing the default theme in the theme customization documentation.
¥Arbitrary values
If you need to use a one-off space value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
<div class="space-y-[5px]">
<!-- ... -->
</div>
Learn more about arbitrary value support in the arbitrary values documentation.