Tailwind CSS - Flex Wrap
Tailwind CSS Flex Wrap 是一个实用类，用于指定弹性项目在其容器内如何换行。该类指定弹性项目是否换行到新行。
Tailwind CSS Flex Wrap 类
以下是 Tailwind CSS Flex Wrap 类的列表，用于指定弹性项目的换行行为。
| 类 | CSS 属性 |
|---|---|
| flex-wrap | flex-wrap: wrap; |
| flex-wrap-reverse | flex-wrap: wrap-reverse; |
| flex-nowrap | flex-wrap: nowrap; |
Tailwind CSS Flex Wrap 的功能
- flex-wrap:此类取代了 CSS flex-wrap: wrap; 属性。此类允许将弹性项目换行到多行。
- flex-wrap-reverse:此类取代了 CSS flex-wrap: wrap-reverse; 属性。此类允许将弹性项目反向换行。
- flex-nowrap:此类取代了 CSS flex-wrap: nowrap; 属性。此类不允许将弹性项目换行。
Tailwind CSS Flex Wrap 类示例
以下示例将说明 Tailwind CSS Flex Wrap 类的实用功能。
Tailwind CSS Flex Wrap
以下示例说明了 flex-wrap 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Wrap Class
</h2>
<div class="flex flex-wrap
bg-gray-200 h-48 border-2 border-black">
<div class="bg-green-600 p-4 w-1/2">
Item 1
</div>
<div class="bg-green-500 p-4 w-1/2">
Item 2
</div>
<div class="bg-green-400 p-4 w-1/2">
Item 3
</div>
<div class="bg-green-300 p-4 w-1/2">
Item 4
</div>
<div class="bg-green-200 p-4 w-1/2">
Item 5
</div>
<div class="bg-green-100 p-4 w-1/2">
Item 6
</div>
</div>
</body>
</html>
Tailwind CSS Flex Nowrap
以下示例演示了 flex-nowrap 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Nowrap Class
</h2>
<div class="flex flex-nowrap bg-gray-200 h-48
border-2 border-black">
<div class="bg-green-600 p-4 w-1/2">
Item 1
</div>
<div class="bg-green-500 p-4 w-1/2">
Item 2
</div>
<div class="bg-green-400 p-4 w-1/2">
Item 3
</div>
<div class="bg-green-300 p-4 w-1/2">
Item 4
</div>
<div class="bg-green-200 p-4 w-1/2">
Item 5
</div>
<div class="bg-green-100 p-4 w-1/2">
Item 6
</div>
</div>
</body>
</html>
Tailwind CSS Flex Wrap Reverse 类
以下示例演示了 flex-wrap-reverse 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Wrap Reverse Class
</h2>
<div class="flex flex-wrap-reverse bg-gray-200 h-48
border-2 border-black">
<div class="bg-green-600 p-4 w-1/2">
Item 1
</div>
<div class="bg-green-500 p-4 w-1/2">
Item 2
</div>
<div class="bg-green-400 p-4 w-1/2">
Item 3
</div>
<div class="bg-green-300 p-4 w-1/2">
Item 4
</div>
<div class="bg-green-200 p-4 w-1/2">
Item 5
</div>
<div class="bg-green-100 p-4 w-1/2">
Item 6
</div>
</div>
</body>
</html>
