Tailwind CSS - Flex Basis
Tailwind CSS Flex Basis 是一个实用类，用于在分配可用空间之前设置弹性项目的初始大小。
Tailwind CSS Flex Basis 类
以下是 Tailwind CSS Flex Basis 类的列表，这些类是用于有效设置弹性项目初始大小的实用类。
| 类 | CSS 属性 |
|---|---|
| basis-0 | flex-basis: 0px; |
| basis-1 | flex-basis: 0.25rem; /* 4px */ |
| basis-2 | flex-basis: 0.5rem; /* 8px */ |
| basis-3 | flex-basis: 0.75rem; /* 12px */ |
| basis-4 | flex-basis: 1rem; /* 16px */ |
| basis-5 | flex-basis: 1.25rem; /* 20px */ |
| basis-6 | flex-basis: 1.5rem; /* 24px */ |
| basis-7 | flex-basis: 1.75rem; /* 28px */ |
| basis-8 | flex-basis: 2rem; /* 32px */ |
| basis-9 | flex-basis: 2.25rem; /* 36px */ |
| basis-10 | flex-basis: 2.5rem; /* 40px */ |
| basis-11 | flex-basis: 2.75rem; /* 44px */ |
| basis-12 | flex-basis: 3rem; /* 48px */ |
| basis-14 | flex-basis: 3.5rem; /* 56px */ |
| basis-16 | flex-basis: 4rem; /* 64px */ |
| basis-20 | flex-basis: 5rem; /* 80px */ |
| basis-24 | flex-basis: 6rem; /* 96px */ |
| basis-28 | flex-basis: 7rem; /* 112px */ |
| basis-32 | flex-basis: 8rem; /* 128px */ |
| basis-36 | flex-basis: 9rem; /* 144px */ |
| basis-40 | flex-basis: 10rem; /* 160px */ |
| basis-44 | flex-basis: 11rem; /* 176px */ |
| basis-48 | flex-basis: 12rem; /* 192px */ |
| basis-52 | flex-basis: 13rem; /* 208px */ |
| basis-56 | flex-basis: 14rem; /* 224px */ |
| basis-60 | flex-basis: 15rem; /* 240px */ |
| basis-64 | flex-basis: 16rem; /* 256px */ |
| basis-72 | flex-basis: 18rem; /* 288px */ |
| basis-80 | flex-basis: 20rem; /* 320px */ |
| basis-96 | flex-basis: 24rem; /* 384px */ |
| basis-auto | flex-basis: auto; |
| basis-px | flex-basis: 1px; |
| basis-0.5 | flex-basis: 0.125rem; /* 2px */ |
| basis-1.5 | flex-basis: 0.375rem; /* 6px */ |
| basis-2.5 | flex-basis: 0.625rem; /* 10px */ |
| basis-3.5 | flex-basis: 0.875rem; /* 14px */ |
| basis-1/2 | flex-basis: 50%; |
| basis-1/3 | flex-basis: 33.333333%; |
| basis-2/3 | flex-basis: 66.666667%; |
| basis-1/4 | flex-basis: 25%; |
| basis-2/4 | flex-basis: 50%; |
| basis-3/4 | flex-basis: 75%; |
| basis-1/5 | flex-basis: 20%; |
| basis-2/5 | flex-basis: 40%; |
| basis-3/5 | flex-basis: 60%; |
| basis-4/5 | flex-basis: 80%; |
| basis-1/6 | flex-basis: 16.666667%; |
| basis-2/6 | flex-basis: 33.333333%; |
| basis-3/6 | flex-basis: 50%; |
| basis-4/6 | flex-basis: 66.666667%; |
| basis-5/6 | flex-basis: 83.333333%; |
| basis-1/12 | flex-basis: 8.333333%; |
| basis-2/12 | flex-basis: 16.666667%; |
| basis-3/12 | flex-basis: 25%; |
| basis-4/12 | flex-basis: 33.333333%; |
| basis-5/12 | flex-basis: 41.666667%; |
| basis-6/12 | flex-basis: 50%; |
| basis-7/12 | flex-basis: 58.333333%; |
| basis-8/12 | flex-basis: 66.666667%; |
| basis-9/12 | flex-basis: 75%; |
| basis-10/12 | flex-basis: 83.333333%; |
| basis-11/12 | flex-basis: 91.666667%; |
| basis-full | flex-basis: 100%; |
Tailwind CSS Flex Basis 类的功能
- basis-* 该类指定 flex 项目的初始大小，因此它将保持其指定的大小，而剩余空间将分配给其他元素。{* 此处指定可根据需要设置的大小值。
- basis-auto: 此类取代了 CSS 的 flex-basis: auto; 属性，该属性指定弹性项目将占用其内容所需的空间。
Tailwind CSS Flex Basis 类示例
以下示例将说明 Tailwind CSS Flex Basis 类的实用功能。
固定弹性项目
以下示例说明了 basis-* 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Basis
</h2>
<div class="flex p-3 border-black border-2">
<div class="bg-green-500 p-3 mr-1.5 h-16">
Flex item 1
</div>
<div class="bg-green-400 p-3 mr-1.5 h-16">
Flex item 2
</div>
<div class="bg-green-300 p-3 mr-1.5 h-16
basis-56">
Flex item 3
</div>
<div class="bg-green-200 p-3 mr-1.5 h-16">
Flex item 4
</div>
</div>
</body>
</html>
自动弹性项目
以下示例说明了 basis-auto 类的用法。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Basis Auto
</h2>
<div class="flex bg-green-500">
<div class="bg-green-500 p-1 m-1.25 h-12">
Flex item 1
</div>
<div class="bg-green-400 p-1 m-1.25 h-12">
Flex item 2
</div>
<div class="bg-green-300 p-1 m-1.25 h-12
flex-auto">
Flex item 3
</div>
<div class="bg-green-200 p-1 m-1.25 h-12">
Flex item 4
</div>
<div class="bg-green-100 p-1 m-1.25 h-12">
Flex item 5
</div>
</div>
</body>
</html>
Flex 上的悬停效果
以下示例演示了如何将 Flex Basis 与 hover 类结合使用。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
<h2 class="text-2xl mb-3">
Tailwind CSS Flex Basis With Hover Class
</h2>
<div class="flex bg-green-100 h-44">
<div class="bg-green-300 flex-basis-1/3
hover:basis-full p-4
border-2 border-green-700">
Item 1 <br>
<span class="text-pink-600
font-bold">
Hover me :)
</span>
</div>
<div class="bg-lime-300 p-4 flex-basis-1/3
border-2 border-black">
Item 2
</div>
<div class="bg-teal-300 p-4 flex-basis-1/3
border-2 border-blue-500">
Item 3
</div>
</div>
</body>
</html>
