Tailwind CSS - Flex
Tailwind CSS Flex 是一个实用类，用于指定弹性项目在弹性容器内如何扩展和收缩。
Tailwind CSS Flex 类
以下是 Tailwind CSS Flex 类的列表，用于指定弹性项目的扩展和收缩行为。
| 类 | CSS 属性 |
|---|---|
| flex-1 | flex: 1 1 0%; |
| flex-auto | flex: 1 1 auto; |
| flex-initial | flex: 0 1 auto; |
| flex-none | flex: none; |
Tailwind CSS Flex 的功能
- flex-1:此类取代了 CSS 的 flex: 1 1 0%; 属性。此类允许弹性项目根据需要增大或缩小，同时忽略其初始大小。
- flex-auto:此类取代了 CSS 的 flex: 1 1 auto; 属性。此类允许弹性项目增大或缩小，同时考虑其初始大小。
- flex-initial:此类取代了 CSS 的 flex: 0 1 auto; 属性。此类允许弹性项目缩小但不增大，同时仍考虑其初始大小。
- flex-none:此类取代了 CSS 的 flex: none; 属性。此类不允许弹性项目伸缩。
Tailwind CSS 弹性项目示例
以下示例将说明 Tailwind CSS 弹性项目实用功能。
允许弹性项目根据需要伸缩
为了允许任何弹性项目根据需要伸缩，我们可以使用 flex-1 类，该类将忽略其初始大小。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex 1
</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="flex-1 bg-green-500 p-4 w-56 mr-2
border-2 border-green-800 rounded">
Flex Item 2
</div>
<div class="flex-1 bg-green-300 p-4 w-28 mr-2
border-2 border-green-800 rounded">
Flex Item 3
</div>
</div>
</body>
</html>
允许 Flex 项目增大或缩小
如果我们在每个项目上使用 flex-auto 类，那么我们可以允许每个 Flex 项目根据屏幕尺寸增大或缩小。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Auto
</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="flex-auto bg-green-500 p-4 w-56 mr-2
border-2 border-green-800 rounded">
Flex Item 2
</div>
<div class="flex-auto bg-green-300 p-4 w-28 mr-2
border-2 border-orange-800 rounded">
Flex Item 3
</div>
</div>
</body>
</html>
允许 Flex 项目收缩但不增大
如果我们在任何子元素上使用 flex-initial 类，那么我们允许该项目收缩，但限制其不会根据屏幕尺寸增大。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Initial
</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="flex-initial bg-green-500 p-4 w-56 mr-2
border-2 border-green-800 rounded">
Flex Item 2
</div>
<div class="flex-initial bg-green-300 p-4 w-28 mr-2
border-2 border-orange-800 rounded">
Flex Item 3
</div>
</div>
</body>
</html>
防止 Flex 项目增大或缩小
通过使用 flex-none 类，我们可以防止 Flex 项目根据屏幕尺寸变化而增大或缩小。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex None
</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="flex-none 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-28 mr-2
border-2 border-orange-800 rounded">
Flex Item 3
</div>
</div>
</body>
</html>
