Tailwind CSS - Flex Shrink
Tailwind CSS Flex Shrink 是一个 utility class，用于指定 flex 项在 flex 容器中的收缩方式。
Tailwind CSS Flex Shrink 类
以下是 Tailwind CSS Flex Shrink 类列表，用于指定 flex 项的收缩行为。
| Class | CSS Properties |
|---|---|
| shrink | flex-shrink: 1; |
| shrink-0 | flex-shrink: 0; |
Tailwind CSS Flex Shrink 的功能
- shrink: 该类替换 CSS flex-shrink: 1; 属性。该类允许 flex 项根据需要收缩。
- shrink-0: 该类替换 CSS flex-shrink: 0 属性。该类不允许 flex 项收缩。
Tailwind CSS Flex Shrink 类示例
以下示例将演示 Tailwind CSS Flex Shrink 类 utility 的用法。
允许 Flex 项收缩
在本示例中，我们将为一个项设置 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>