Tailwind CSS - Flex Grow
Tailwind CSS Flex Grow 是一个实用类，用于指定 flex 项在 flex 容器中的增长方式。
Tailwind CSS Flex Grow 类
以下是指定 flex 项扩展或增长行为的 Tailwind CSS Flex Grow 类列表。
| Class | CSS Properties |
|---|---|
| grow | flex-grow: 1; |
| grow-0 | flex-grow: 0; |
Tailwind CSS Flex Grow 的功能
- grow: 该类替换 CSS flex-grow: 1; 属性。该类允许 flex 项增长并填充可用空间。
- grow-0: 该类替换 CSS flex-grow: 0; 属性。该类不允许 flex 项增长。
Tailwind CSS Flex Grow 类示例
以下示例将演示 Tailwind CSS Flex Grow 实用类的使用。
允许 Flex 项增长
在本示例中，我们将为一个项设置 grow 类，让该项增长以填充任何可用空间。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Grow
</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="grow bg-green-500 p-4 w-48 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 项增长
要阻止任何项增长，我们可以使用 grow-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 Grow 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="grow-0 bg-green-500 p-4 w-48 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>