Flex Direction 伸缩方向
控制伸缩项方向的实用工具。
| Class | Properties |
|---|
基本用法
Row 行
使用 flex-row 来将伸缩项在与文本方向相同的水平方向上定位：
01
02
03
html
<div class="flex flex-row ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>Row reversed 反转行
使用 flex-row-reverse 来沿着相反的方向水平定位伸缩项：
01
02
03
html
<div class="flex flex-row-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>Column 列
使用 flex-col 来垂直定位伸缩项：
01
02
03
html
<div class="flex flex-col ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>Column reversed 列反转
使用 flex-col-reverse 来使弹性项目在垂直方向上以相反的方向定位：
01
02
03
html
<div class="flex flex-col-reverse ...">
<div>01</div>
<div>02</div>
<div>03</div>
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:flex-row 只在悬停时应用 flex-row 实用程序。
html
<div class="flex flex-col hover:flex-row">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:flex-row 仅在中等屏幕尺寸及以上应用 flex-row 实用程序。
html
<div class="flex flex-col md:flex-row">
<!-- ... -->
</div>