Tailwind CSS - Flex Shrink
Tailwind CSS Flex Shrink 是一个实用程序类，用于指定弹性项目在弹性容器内如何收缩。
Tailwind CSS Flex Shrink 类
以下是 Tailwind CSS Flex Shrink 类的列表，用于指定弹性项目的收缩行为。
| 类 | CSS 属性 |
|---|---|
| shrink | flex-shrink: 1; |
| shrink-0 | flex-shrink: 0; |
Tailwind CSS Flex Shrink 的功能
- shrink: 此类替换了 CSS flex-shrink: 1; 属性。此类允许弹性项目根据需要收缩。
- shrink-0: 此类替换了 CSS flex-shrink: 0 属性。此类不允许弹性项目收缩。
Tailwind CSS Flex Shrink 类示例
以下示例将说明 Tailwind CSS Flex Shrink 类的实用功能。
允许弹性项目收缩
在此示例中，我们将在项目上设置一个 shrink 类，允许该项目根据需要收缩。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Shrink
</h2>
<div class="flex">
<div class="flex-none bg-green-300 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 1
</div>
<div class="shrink bg-green-500 p-4 w-56 mr-2
border-2 border-green-800 rounded">
Flex Item 2
</div>
<div class="flex-none bg-green-300 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 3
</div>
</div>
</body>
</html>
防止 Flex 项目收缩
为了防止任何项目收缩，我们可以使用 shrink-0 类。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Shrink 0
</h2>
<div class="flex">
<div class="flex-none bg-green-300 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 1
</div>
<div class="shrink-0 bg-green-500 p-4 w-56 mr-2
border-2 border-green-800 rounded">
Flex Item 2
</div>
<div class="flex-none bg-green-300 p-4 w-16 mr-2
border-2 border-green-800 rounded">
Flex Item 3
</div>
</div>
</body>
</html>
