Flexbox 和网格
用于控制 flex 项目方向的实用工具。
使用 flex-row
将 flex 项目水平放置在与文本相同的方向
<div class="flex flex-row ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
使用 flex-row-reverse
将 flex 项目水平放置在相反的方向
<div class="flex flex-row-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
使用 flex-col
垂直定位 flex 项目
<div class="flex flex-col ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
使用 flex-col-reverse
以相反的方向垂直定位 flex 项目
<div class="flex flex-col-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>
Tailwind 允许你使用变体修饰符在不同状态下有条件地应用实用程序类。例如,使用 hover:flex-row
仅在悬停时应用 flex-row
实用程序。
<div class="flex flex-col hover:flex-row">
<!-- ... -->
</div>
要查看所有可用状态修饰符的完整列表,请查看 悬停、焦点和其他状态 文档。
您还可以使用变体修饰符来针对媒体查询,例如响应式断点、暗模式、更喜欢减少运动等。例如,使用 md:flex-row
仅在中型及以上屏幕尺寸上应用 flex-row
实用程序。
<div class="flex flex-col md:flex-row">
<!-- ... -->
</div>