Tailwind CSS - Flex Direction
Tailwind CSS Flex Direction 是一个实用类，用于设置弹性容器内弹性项目的方向。
Tailwind CSS Flex Direction 类
以下是 Tailwind CSS Flex Direction 类的列表，这些类是用于有效设置弹性项目初始大小的实用工具。
| 类 | CSS 属性 |
|---|---|
| flex-row | flex-direction: row; |
| flex-row-reverse | flex-direction: row-reverse; |
| flex-col | flex-direction: column; |
| flex-col-reverse | flex-direction: column-reverse; |
Tailwind CSS Flex Direction 的功能
Tailwind CSS 弹性方向类示例
以下示例将说明 Tailwind CSS 弹性方向类的实用功能。
水平弹性项目作为行
以下示例说明了 flex-row 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Row
</h2>
<div class="inline-flex flex-row">
<div class="bg-green-500
text-4xl p-3 mr-1.5">One</div>
<div class="bg-green-400
text-4xl p-3 mr-1.5">two</div>
<div class="bg-green-300
text-4xl p-3 mr-1.5">three</div>
<div class="bg-green-200
text-4xl p-3 mr-1.5">four</div>
</div>
</body>
</html>
水平 Flex 项目作为反向行
以下示例演示了 flex-row-reverse 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Row Reverse
</h2>
<div class="inline-flex flex-row-reverse">
<div class="bg-green-500
text-4xl p-3 mr-1.5">One</div>
<div class="bg-green-400
text-4xl p-3 mr-1.5">two</div>
<div class="bg-green-300
text-4xl p-3 mr-1.5">three</div>
<div class="bg-green-200
text-4xl p-3 mr-1.5">four</div>
</div>
</body>
</html>
垂直 Flex 项目作为列
以下示例演示了 flex-col 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Col Class
</h2>
<div class="inline-flex flex-col">
<div class="bg-green-500
text-4xl p-3 mb-1.5">One</div>
<div class="bg-green-400
text-4xl p-3 mb-1.5">two</div>
<div class="bg-green-300
text-4xl p-3 mb-1.5">three</div>
<div class="bg-green-200
text-4xl p-3 mb-1.5">four</div>
</div>
</body>
</html>
垂直 Flex 项目作为反向列
以下示例演示了 flex-col-reverse 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-2">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Col Reverse Class
</h2>
<div class="inline-flex flex-col-reverse">
<div class="bg-green-500
text-4xl p-3 mb-1.5">One</div>
<div class="bg-green-400
text-4xl p-3 mb-1.5">two</div>
<div class="bg-green-300
text-4xl p-3 mb-1.5">three</div>
<div class="bg-green-200
text-4xl p-3 mb-1.5">four</div>
</div>
</body>
</html>
