Tailwind CSS - Flex Grow
Tailwind CSS Flex Grow 是一个实用类，用于指定弹性项目在弹性容器内如何扩展。
Tailwind CSS Flex Grow 类
以下是 Tailwind CSS Flex Grow 类的列表，用于指定弹性项目的扩展或增长行为。
| 类 | CSS 属性 |
|---|---|
| grow | flex-grow: 1; |
| grow-0 | flex-grow: 0; |
Tailwind CSS Flex Grow 的功能
- grow: 此类替换了 CSS flex-grow: 1; 属性。此类允许弹性项目扩展并填充可用空间。
- grow-0: 此类替换了 CSS flex-grow: 0; 属性。此类不允许弹性项目扩展。
Tailwind CSS Flex Grow 类示例
以下示例将说明 Tailwind CSS Flex Grow 类的实用功能。
允许弹性项目扩展
在此示例中，我们将在项目上设置 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>
