Python私教张大鹏万字长文讲解Tailwindcss Flex 和 Grid 布局相关的样式，附完整源码和效果截图

flex-basics 样式类

Utilities for controlling the initial size of flex items.

用于控制伸缩项的初始大小的实用程序。

基础样式

Class	Properties
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%;

案例：控制flex子元素大小

Use the basis-{size} utilities to set the initial size of flex items.

使用basis-{size}实用程序来设置伸缩项的初始大小。

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="h-32 bg-purple-500 basis-1/2  rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

代码说明：

• basis-1/4：占据四分之一
• basis-1/2：占据二分之一
• rounded：圆角

flex-direction 相关的样式类

Utilities for controlling the direction of flex items.

用于控制伸缩项方向的实用程序。

基础样式

lass	Properties
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

案例：按行排列

Use flex-row to position flex items horizontally in the same direction as text:

使用flex-row可以在与文本相同的方向上水平定位伸缩项:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8 flex-row">
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="h-32 bg-purple-500 basis-1/2  rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：按行反序排列

Use flex-row-reverse to position flex items horizontally in the opposite direction:

使用flex-row-reverse可将伸缩项水平放置在相反方向上:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8 flex-row-reverse">
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="h-32 bg-purple-500 basis-1/2  rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：按列排列

Use flex-col to position flex items vertically:

使用flex-col垂直定位伸缩项:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8 flex-col">
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="h-32 bg-purple-500 basis-1/2  rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：按列反序排列

Use flex-col-reverse to position flex items vertically in the opposite direction:

使用flex-col-reverse将伸缩项垂直放置在相反方向:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8 flex-col-reverse">
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="h-32 bg-purple-500 basis-1/4  rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="h-32 bg-purple-500 basis-1/2  rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

flex-wrap 相关的样式类

Utilities for controlling how flex items wrap.

用于控制弹性项目自动换行的实用程序。

基础样式

Class	Properties
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

案例：自动换行

Use flex-nowrap to prevent flex items from wrapping, causing inflexible items to overflow the container if necessary:

使用flex-nowrap防止有弹性的项目包装，导致不灵活的项目溢出容器(如有必要):

Use flex-wrap to allow flex items to wrap:

使用flex-wrap允许flex项目自动换行:

vue3示例：

<template>
  <div class="flex flex-wrap gap-3 bg-indigo-50 p-8">
    <div class="h-32 bg-purple-500 w-3/4  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="h-32 bg-purple-500 w-3/4  rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="h-32 bg-purple-500 w-3/4  rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：自动换行并反序

Use flex-wrap-reverse to wrap flex items in the reverse direction:

使用flex-wrap-reverse以相反的方向包装伸缩项目:

vue3示例：

<template>
  <div class="flex flex-wrap-reverse gap-3 bg-indigo-50 p-8">
    <div class="h-32 bg-purple-500 w-3/4  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="h-32 bg-purple-500 w-3/4  rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="h-32 bg-purple-500 w-3/4  rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

flex 相关的样式类

Utilities for controlling how flex items both grow and shrink.

用于控制伸缩项如何增长和收缩的实用程序。

基础样式

Class	Properties
flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

案例：自动对齐初始元素高度

Use flex-initial to allow a flex item to shrink but not grow, taking into account its initial size:

使用flex-initial允许伸缩项收缩而不是增长，考虑到它的初始大小:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="flex-initial w-64 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-initial w-64 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：自动分配剩余空间大小

Use flex-1 to allow a flex item to grow and shrink as needed, ignoring its initial size:

使用flex-1允许伸缩项根据需要增长和缩小，忽略其初始大小:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：按照初始宽度自动增长

Use flex-auto to allow a flex item to grow and shrink, taking into account its initial size:

使用flex-auto允许伸缩项根据其初始大小进行增长和收缩:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="flex-auto w-64 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-auto w-32 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：防止增长

Use flex-none to prevent a flex item from growing or shrinking:

使用flex-none来防止伸缩项的增长或收缩:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="flex-none w-64 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-1 w-32 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

flex-grow 相关的样式类

Utilities for controlling how flex items grow.

用于控制伸缩项如何增长的实用程序。

基础样式

Class	Properties
grow	flex-grow: 1;
grow-0	flex-grow: 0;

案例：自动增长

Use grow to allow a flex item to grow to fill any available space:

使用grow允许伸缩项增长以填充任何可用空间:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="grow  w-64 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-none w-32 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：防止增长

Use grow-0 to prevent a flex item from growing:

使用grow-0来防止伸缩项的增长:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="grow-0 w-64 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-none w-32 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

flex-shrink 相关的样式类

Utilities for controlling how flex items shrink.

用于控制伸缩项收缩方式的实用程序。

基础样式

Class	Properties
shrink	flex-shrink: 1;
shrink-0	flex-shrink: 0;

案例：自动收缩

Use shrink to allow a flex item to shrink if needed:

使用收缩来允许伸缩项在需要时收缩:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="shrink w-96 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-none w-14 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：防止收缩

Use shrink-0 to prevent a flex item from shrinking:

使用shrink-0来防止伸缩项目收缩:

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="shrink-0 w-96 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-none w-14 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

order 相关的样式类

Utilities for controlling the order of flex and grid items.

用于控制伸缩和网格项的顺序的实用程序。

基础样式

Class	Properties
order-1	order: 1;
order-2	order: 2;
order-3	order: 3;
order-4	order: 4;
order-5	order: 5;
order-6	order: 6;
order-7	order: 7;
order-8	order: 8;
order-9	order: 9;
order-10	order: 10;
order-11	order: 11;
order-12	order: 12;
order-first	order: -9999;
order-last	order: 9999;
order-none	order: 0;

案例：控制元素的显示顺序

Use order-{order} to render flex and grid items in a different order than they appear in the DOM.

使用order-{order}以不同于它们在DOM中显示的顺序来呈现flex和grid项。

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-none w-14 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="shrink-0 w-96 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="order-first flex-none w-14 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：顺序可以是负数

To use a negative order value, prefix the class name with a dash to convert it to a negative value.

若要使用负序值，请在类名前加上破折号以将其转换为负值。

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="-order-1 flex-none w-24 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">-order-1</div>
    <div class="shrink-0 w-96 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-none w-14 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
  <hr>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="order-1 flex-none w-24 h-14 bg-purple-500  rounded text-white font-bold flex items-center justify-center">order-1</div>
    <div class="shrink-0 w-96 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-none w-14 h-14 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

grid-template-columns 相关的样式类

Utilities for specifying the columns in a grid layout.

用于指定网格布局中的列的实用程序。

基础样式

Class	Properties
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6	grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7	grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8	grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9	grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10	grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11	grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12	grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-none	grid-template-columns: none;
grid-cols-subgrid	grid-template-columns: subgrid;

案例：使用网格布局

Use the grid-cols-{n} utilities to create grids with n equally sized columns.

使用grid-cols-{n}实用程序创建具有n个大小相等的列的网格。

vue3示例：

<script setup>
</script>
<template>
  <div class="grid grid-cols-4 gap-4 bg-indigo-50 p-3">
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">01</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">02</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">03</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">04</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">05</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">06</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">07</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">08</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">09</div>
  </div>
</template>

案例：子网格布局

Use the grid-cols-subgrid utility to adopt the column tracks defined by the item’s parent.

使用grid-cols-subgrid实用程序来采用项的父项定义的列轨道。

vue3案例：

<script setup>
</script>
<template>
  <div class="grid grid-cols-4 gap-4 bg-indigo-50 p-3">
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">01</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">02</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">03</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">04</div>
    <div class="bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">05</div>
    <!--
    grid：网格布局
    grid-cols-subgrid：子网格布局
    gap-3：网格间隔3，和父容器一致
    col-span-3：合并3列网格
    col-start-2：跳过列，从第二列开始
    -->
    <div class="grid grid-cols-subgrid gap-3 col-span-3">
      <div class="col-start-2 bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">06</div>
    </div>
  </div>
</template>

grid-column 相关的样式类

Utilities for controlling how elements are sized and placed across grid columns.

用于控制元素在网格列之间的大小和放置方式的实用程序。

基础样式

Class	Properties
col-auto	grid-column: auto;
col-span-1	grid-column: span 1 / span 1;
col-span-2	grid-column: span 2 / span 2;
col-span-3	grid-column: span 3 / span 3;
col-span-4	grid-column: span 4 / span 4;
col-span-5	grid-column: span 5 / span 5;
col-span-6	grid-column: span 6 / span 6;
col-span-7	grid-column: span 7 / span 7;
col-span-8	grid-column: span 8 / span 8;
col-span-9	grid-column: span 9 / span 9;
col-span-10	grid-column: span 10 / span 10;
col-span-11	grid-column: span 11 / span 11;
col-span-12	grid-column: span 12 / span 12;
col-span-full	grid-column: 1 / -1;
col-start-1	grid-column-start: 1;
col-start-2	grid-column-start: 2;
col-start-3	grid-column-start: 3;
col-start-4	grid-column-start: 4;
col-start-5	grid-column-start: 5;
col-start-6	grid-column-start: 6;
col-start-7	grid-column-start: 7;
col-start-8	grid-column-start: 8;
col-start-9	grid-column-start: 9;
col-start-10	grid-column-start: 10;
col-start-11	grid-column-start: 11;
col-start-12	grid-column-start: 12;
col-start-13	grid-column-start: 13;
col-start-auto	grid-column-start: auto;
col-end-1	grid-column-end: 1;
col-end-2	grid-column-end: 2;
col-end-3	grid-column-end: 3;
col-end-4	grid-column-end: 4;
col-end-5	grid-column-end: 5;
col-end-6	grid-column-end: 6;
col-end-7	grid-column-end: 7;
col-end-8	grid-column-end: 8;
col-end-9	grid-column-end: 9;
col-end-10	grid-column-end: 10;
col-end-11	grid-column-end: 11;
col-end-12	grid-column-end: 12;
col-end-13	grid-column-end: 13;
col-end-auto	grid-column-end: auto;

案例：合并多列

Use the col-span-{n} utilities to make an element span n columns.

使用col-span-{n}实用程序使元素跨越n列。

vue3示例：

<script setup>
</script>
<template>
  <div class="grid grid-cols-3 gap-3 bg-indigo-50 p-3">
    <div class="bg-indigo-300 h-16 rounded text-white font-bold flex items-center justify-center">01</div>
    <div class="bg-indigo-300 h-16 rounded text-white font-bold flex items-center justify-center">02</div>
    <div class="bg-indigo-300 h-16 rounded text-white font-bold flex items-center justify-center">03</div>
    <!--合并两列-->
    <div class="col-span-2 bg-indigo-700 h-16 rounded text-white font-bold flex items-center justify-center">04</div>
    <div class="bg-indigo-300 h-16 rounded text-white font-bold flex items-center justify-center">05</div>
    <div class="bg-indigo-300 h-16 rounded text-white font-bold flex items-center justify-center">06</div>
    <!--合并两列-->
    <div class="col-span-2 bg-indigo-700 h-16 rounded text-white font-bold flex items-center justify-center">07</div>
  </div>
</template>

案例：开始列和结束列

Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.

使用col-start-{n}和col-end-{n}实用程序使元素在第n个网格线上开始或结束。这些工具还可以与col-span-{n}实用程序组合使用，以跨越特定数量的列。

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

注意，CSS网格行从1开始，而不是0，所以6列网格中的全宽元素将从第1行开始，到第7行结束。

vue3示例：

<script setup>
</script>
<template>
  <!--grid的列是从1开始的。这里数量是6，所以列应该是：1、2、3、4、5、6-->
  <div class="grid grid-cols-6 gap-3 bg-indigo-50 p-3">
    <!--从第2列开始，合并4列-->
    <div class="col-start-2 col-span-4 bg-blue-500 h-16 rounded text-white font-bold flex items-center justify-center">01</div>
    <!--从第1列开始，在第3列结束-->
    <div class="col-start-1 col-end-3 bg-blue-500 h-16 rounded text-white font-bold flex items-center justify-center">02</div>
    <!--从第7列结束，合并2列-->
    <div class="col-end-7 col-span-2 bg-blue-500 h-16 rounded text-white font-bold flex items-center justify-center">03</div>
    <!--从第1列开始，在第7列结束-->
    <div class="col-start-1 col-end-7 bg-blue-500 h-16 rounded text-white font-bold flex items-center justify-center">04</div>
  </div>
</template>

grid-template-rows 相关的样式类

Utilities for specifying the rows in a grid layout.

用于指定网格布局中的行的实用程序。

基础示例

Class	Properties
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-7	grid-template-rows: repeat(7, minmax(0, 1fr));
grid-rows-8	grid-template-rows: repeat(8, minmax(0, 1fr));
grid-rows-9	grid-template-rows: repeat(9, minmax(0, 1fr));
grid-rows-10	grid-template-rows: repeat(10, minmax(0, 1fr));
grid-rows-11	grid-template-rows: repeat(11, minmax(0, 1fr));
grid-rows-12	grid-template-rows: repeat(12, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;
grid-rows-subgrid	grid-template-rows: subgrid;

案例：指定行数

Use the grid-rows-{n} utilities to create grids with n equally sized rows.

使用grid-rows-{n}实用程序创建具有n行大小相等的网格。

vue3示例：

<script setup>
</script>
<template>
  <!--
  grid：指定网格布局
  grid-rows-4：指定有4行
  grid-flow-col：指定自动计算列
  -->
  <div class="grid grid-rows-4 grid-flow-col gap-3 bg-indigo-50 p-3">
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">01</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">02</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">03</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">04</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">05</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">06</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">07</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">08</div>
    <div class="bg-pink-500 h-16 rounded text-white font-bold flex items-center justify-center">09</div>
  </div>
</template>

案例：子行网格布局

Use the grid-rows-subgrid utility to adopt the row tracks defined by the item’s parent.

使用网格-行-子网格实用程序来采用由项的父项定义的行轨迹。

vue3示例：

<script setup>
</script>
<template>
  <div class="grid grid-rows-4 grid-flow-col gap-3 bg-indigo-50 p-3">
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">01</div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">02</div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">03</div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">04</div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">05</div>
    <!--字网格布局-->
    <div class="grid grid-rows-subgrid gap-3 row-span-3">
      <div class="row-start-2 bg-fuchsia-600 h-16 rounded text-white font-bold flex items-center justify-center">06</div>
    </div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">07</div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">08</div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">09</div>
    <div class="bg-blue-300 h-16 rounded text-white font-bold flex items-center justify-center">10</div>
  </div>
</template>

grid-row 相关的样式类

Utilities for controlling how elements are sized and placed across grid rows.

用于控制元素大小和跨网格行放置方式的实用程序。

基础样式

Class	Properties
row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-2	grid-row: span 2 / span 2;
row-span-3	grid-row: span 3 / span 3;
row-span-4	grid-row: span 4 / span 4;
row-span-5	grid-row: span 5 / span 5;
row-span-6	grid-row: span 6 / span 6;
row-span-7	grid-row: span 7 / span 7;
row-span-8	grid-row: span 8 / span 8;
row-span-9	grid-row: span 9 / span 9;
row-span-10	grid-row: span 10 / span 10;
row-span-11	grid-row: span 11 / span 11;
row-span-12	grid-row: span 12 / span 12;
row-span-full	grid-row: 1 / -1;
row-start-1	grid-row-start: 1;
row-start-2	grid-row-start: 2;
row-start-3	grid-row-start: 3;
row-start-4	grid-row-start: 4;
row-start-5	grid-row-start: 5;
row-start-6	grid-row-start: 6;
row-start-7	grid-row-start: 7;
row-start-8	grid-row-start: 8;
row-start-9	grid-row-start: 9;
row-start-10	grid-row-start: 10;
row-start-11	grid-row-start: 11;
row-start-12	grid-row-start: 12;
row-start-13	grid-row-start: 13;
row-start-auto	grid-row-start: auto;
row-end-1	grid-row-end: 1;
row-end-2	grid-row-end: 2;
row-end-3	grid-row-end: 3;
row-end-4	grid-row-end: 4;
row-end-5	grid-row-end: 5;
row-end-6	grid-row-end: 6;
row-end-7	grid-row-end: 7;
row-end-8	grid-row-end: 8;
row-end-9	grid-row-end: 9;
row-end-10	grid-row-end: 10;
row-end-11	grid-row-end: 11;
row-end-12	grid-row-end: 12;
row-end-13	grid-row-end: 13;
row-end-auto	grid-row-end: auto;

案例：合并多行

Use the row-span-{n} utilities to make an element span n rows.

使用row-span-{n}实用程序使元素跨越n行。

vue3案例：

<script setup>
</script>
<template>
  <div class="grid grid-rows-3 grid-flow-col gap-3 bg-indigo-50 p-3">
    <!--合并3行-->
    <div class="row-span-3 bg-purple-500 h-56 rounded text-white font-bold flex items-center justify-center">01</div>
    <!--合并2列-->
    <div class="col-span-2 bg-purple-400 h-20 rounded text-white font-bold flex items-center justify-center">02</div>
    <!--合并2行2列-->
    <div class="row-span-2 col-span-2 bg-purple-500 h-32 rounded text-white font-bold flex items-center justify-center">03</div>
  </div>
</template>

案例：开始行和结束行

Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.

使用row-start-{n}和row-end-{n}实用程序使元素在第n个网格行开始或结束。这些工具还可以与row-span-{n}实用程序结合使用，以跨越特定数量的行。

Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

注意，CSS网格行从1开始，而不是0，所以3行网格中的full-height元素将从第1行开始，到第4行结束。

vue3示例：

<script setup>
</script>
<template>
  <div class="grid grid-rows-3 grid-flow-col gap-3 bg-indigo-50 p-3">
    <!--从第2行开始，合并2行-->
    <div class="row-start-2 row-span-2 bg-blue-500 h-32 rounded text-white font-bold flex items-center justify-center">01</div>
    <!--从第3行结束，合并2列-->
    <div class="row-end-3 row-span-2 bg-blue-400 h-32 rounded text-white font-bold flex items-center justify-center">02</div>
    <!--从第1行开始，在第4行结束-->
    <div class="row-start-1 row-end-4 col-span-2 bg-blue-500 h-32 rounded text-white font-bold flex items-center justify-center">03</div>
  </div>
</template>

grid-auto-flow 相关的样式类

Utilities for controlling how elements in a grid are auto-placed.

用于控制网格中的元素如何自动放置的实用程序。

基础样式

Class	Properties
grid-flow-row	grid-auto-flow: row;
grid-flow-col	grid-auto-flow: column;
grid-flow-dense	grid-auto-flow: dense;
grid-flow-row-dense	grid-auto-flow: row dense;
grid-flow-col-dense	grid-auto-flow: column dense;

案例：使用dense稠密堆积算法

Use the grid-flow-{keyword} utilities to control how the auto-placement algorithm works for a grid layout.

使用grid-flow-{关键字}实用程序来控制自动放置算法如何为网格布局工作。

该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

vue3示例：

<script setup>
</script>
<template>
  <div class="grid grid-cols-3 grid-flow-row-dense gap-3 bg-indigo-50 p-3">
    <!--合并2列-->
    <div class="col-span-2 bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">01</div>
    <div class="col-span-2 bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">02</div>
    <div class="bg-purple-500 h-32 rounded text-white font-bold flex items-center justify-center">03</div>
    <div class="bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">04</div>
    <div class="bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">05</div>
  </div>
</template>

grid-auto-columns 相关的样式类

Utilities for controlling the size of implicitly-created grid columns.

用于控制隐式创建的网格列大小的实用程序。

基础样式

Class	Properties
auto-cols-auto	grid-auto-columns: auto;
auto-cols-min	grid-auto-columns: min-content;
auto-cols-max	grid-auto-columns: max-content;
auto-cols-fr	grid-auto-columns: minmax(0, 1fr);

案例：

Use the auto-cols-{size} utilities to control the size of implicitly-created grid columns.

使用auto-cols-{size}实用程序来控制隐式创建的网格列的大小。

vue3示例：

<script setup>
</script>
<template>
  <div class="grid grid-cols-3 auto-cols-max gap-3 bg-indigo-50 p-3">
    <!--合并2列-->
    <div class="col-span-2 bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">01</div>
    <div class="col-span-2 bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">02</div>
    <div class="bg-purple-500 h-32 rounded text-white font-bold flex items-center justify-center">03</div>
    <div class="bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">04</div>
    <div class="bg-purple-200 h-32 rounded text-white font-bold flex items-center justify-center">05</div>
  </div>
</template>

grid-auto-rows 相关的样式类

Utilities for controlling the size of implicitly-created grid rows.

用于控制隐式创建的网格行的大小的实用程序。

基础样式

Class	Properties
auto-rows-auto	grid-auto-rows: auto;
auto-rows-min	grid-auto-rows: min-content;
auto-rows-max	grid-auto-rows: max-content;
auto-rows-fr	grid-auto-rows: minmax(0, 1fr);

gap 相关的样式类

Utilities for controlling gutters between grid and flexbox items.

用于控制网格和弹性项目之间的沟槽的实用程序。

基础样式

Class	Properties
gap-0	gap: 0px;
gap-x-0	column-gap: 0px;
gap-y-0	row-gap: 0px;
gap-px	gap: 1px;
gap-x-px	column-gap: 1px;
gap-y-px	row-gap: 1px;
gap-0.5	gap: 0.125rem; /* 2px */
gap-x-0.5	column-gap: 0.125rem; /* 2px */
gap-y-0.5	row-gap: 0.125rem; /* 2px */
gap-1	gap: 0.25rem; /* 4px */
gap-x-1	column-gap: 0.25rem; /* 4px */
gap-y-1	row-gap: 0.25rem; /* 4px */
gap-1.5	gap: 0.375rem; /* 6px */
gap-x-1.5	column-gap: 0.375rem; /* 6px */
gap-y-1.5	row-gap: 0.375rem; /* 6px */
gap-2	gap: 0.5rem; /* 8px */
gap-x-2	column-gap: 0.5rem; /* 8px */
gap-y-2	row-gap: 0.5rem; /* 8px */
gap-2.5	gap: 0.625rem; /* 10px */
gap-x-2.5	column-gap: 0.625rem; /* 10px */
gap-y-2.5	row-gap: 0.625rem; /* 10px */
gap-3	gap: 0.75rem; /* 12px */
gap-x-3	column-gap: 0.75rem; /* 12px */
gap-y-3	row-gap: 0.75rem; /* 12px */
gap-3.5	gap: 0.875rem; /* 14px */
gap-x-3.5	column-gap: 0.875rem; /* 14px */
gap-y-3.5	row-gap: 0.875rem; /* 14px */
gap-4	gap: 1rem; /* 16px */
gap-x-4	column-gap: 1rem; /* 16px */
gap-y-4	row-gap: 1rem; /* 16px */
gap-5	gap: 1.25rem; /* 20px */
gap-x-5	column-gap: 1.25rem; /* 20px */
gap-y-5	row-gap: 1.25rem; /* 20px */
gap-6	gap: 1.5rem; /* 24px */
gap-x-6	column-gap: 1.5rem; /* 24px */
gap-y-6	row-gap: 1.5rem; /* 24px */
gap-7	gap: 1.75rem; /* 28px */
gap-x-7	column-gap: 1.75rem; /* 28px */
gap-y-7	row-gap: 1.75rem; /* 28px */
gap-8	gap: 2rem; /* 32px */
gap-x-8	column-gap: 2rem; /* 32px */
gap-y-8	row-gap: 2rem; /* 32px */
gap-9	gap: 2.25rem; /* 36px */
gap-x-9	column-gap: 2.25rem; /* 36px */
gap-y-9	row-gap: 2.25rem; /* 36px */
gap-10	gap: 2.5rem; /* 40px */
gap-x-10	column-gap: 2.5rem; /* 40px */
gap-y-10	row-gap: 2.5rem; /* 40px */
gap-11	gap: 2.75rem; /* 44px */
gap-x-11	column-gap: 2.75rem; /* 44px */
gap-y-11	row-gap: 2.75rem; /* 44px */
gap-12	gap: 3rem; /* 48px */
gap-x-12	column-gap: 3rem; /* 48px */
gap-y-12	row-gap: 3rem; /* 48px */
gap-14	gap: 3.5rem; /* 56px */
gap-x-14	column-gap: 3.5rem; /* 56px */
gap-y-14	row-gap: 3.5rem; /* 56px */
gap-16	gap: 4rem; /* 64px */
gap-x-16	column-gap: 4rem; /* 64px */
gap-y-16	row-gap: 4rem; /* 64px */
gap-20	gap: 5rem; /* 80px */
gap-x-20	column-gap: 5rem; /* 80px */
gap-y-20	row-gap: 5rem; /* 80px */
gap-24	gap: 6rem; /* 96px */
gap-x-24	column-gap: 6rem; /* 96px */
gap-y-24	row-gap: 6rem; /* 96px */
gap-28	gap: 7rem; /* 112px */
gap-x-28	column-gap: 7rem; /* 112px */
gap-y-28	row-gap: 7rem; /* 112px */
gap-32	gap: 8rem; /* 128px */
gap-x-32	column-gap: 8rem; /* 128px */
gap-y-32	row-gap: 8rem; /* 128px */
gap-36	gap: 9rem; /* 144px */
gap-x-36	column-gap: 9rem; /* 144px */
gap-y-36	row-gap: 9rem; /* 144px */
gap-40	gap: 10rem; /* 160px */
gap-x-40	column-gap: 10rem; /* 160px */
gap-y-40	row-gap: 10rem; /* 160px */
gap-44	gap: 11rem; /* 176px */
gap-x-44	column-gap: 11rem; /* 176px */
gap-y-44	row-gap: 11rem; /* 176px */
gap-48	gap: 12rem; /* 192px */
gap-x-48	column-gap: 12rem; /* 192px */
gap-y-48	row-gap: 12rem; /* 192px */
gap-52	gap: 13rem; /* 208px */
gap-x-52	column-gap: 13rem; /* 208px */
gap-y-52	row-gap: 13rem; /* 208px */
gap-56	gap: 14rem; /* 224px */
gap-x-56	column-gap: 14rem; /* 224px */
gap-y-56	row-gap: 14rem; /* 224px */
gap-60	gap: 15rem; /* 240px */
gap-x-60	column-gap: 15rem; /* 240px */
gap-y-60	row-gap: 15rem; /* 240px */
gap-64	gap: 16rem; /* 256px */
gap-x-64	column-gap: 16rem; /* 256px */
gap-y-64	row-gap: 16rem; /* 256px */
gap-72	gap: 18rem; /* 288px */
gap-x-72	column-gap: 18rem; /* 288px */
gap-y-72	row-gap: 18rem; /* 288px */
gap-80	gap: 20rem; /* 320px */
gap-x-80	column-gap: 20rem; /* 320px */
gap-y-80	row-gap: 20rem; /* 320px */
gap-96	gap: 24rem; /* 384px */
gap-x-96	column-gap: 24rem; /* 384px */
gap-y-96	row-gap: 24rem; /* 384px */

案例：统一控制行列间隙

Use gap-{size} to change the gap between both rows and columns in grid and flexbox layouts.

使用gap-{size}来改变网格和弹性布局中行和列之间的间隙。

vue3示例：

<template>
  <div class="flex gap-3 bg-indigo-50 p-8">
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>

  <hr>
  <div class="flex gap-8 bg-indigo-50 p-8">
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>

  <hr>
  <div class="flex gap-28 bg-indigo-50 p-8">
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="flex-1 bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：分别控制行列间隙

Use gap-x-{size} and gap-y-{size} to change the gap between columns and rows independently.

使用gap-x-{size}和gap-y-{size}分别更改列和行之间的间距。

vue3示例：

<template>
  <div class="flex flex-wrap gap-x-3 gap-y-5 bg-indigo-50 p-8">
    <div class="w-1/4 h-20 flex-grow flex-shrink bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20 flex-grow flex-shrink bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20 flex-grow flex-shrink bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
    <div class="w-1/4 h-20 flex-grow flex-shrink bg-purple-500 rounded text-white font-bold flex items-center justify-center">4</div>
    <div class="w-1/4 h-20 flex-grow flex-shrink bg-purple-500 rounded text-white font-bold flex items-center justify-center">5</div>
    <div class="w-1/4 h-20 flex-grow flex-shrink bg-purple-500 rounded text-white font-bold flex items-center justify-center">6</div>
  </div>
</template>

justify-content 相关的样式类

Utilities for controlling how flex and grid items are positioned along a container’s main axis.

用于控制flex和网格项沿容器主轴位置的实用程序。

基础样式

Class	Properties
justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;

案例：水平左对齐

Use justify-start to justify items against the start of the container’s main axis:

使用justify-start对容器主轴的起始位置进行对齐:

vue3示例：

<template>
  <div class="flex justify-start gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：水平居中对齐

Use justify-center to justify items along the center of the container’s main axis:

使用justify-center来对齐沿着容器主轴中心的项:

vue3示例：

<template>
  <div class="flex justify-center gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：水平右对齐

Use justify-end to justify items against the end of the container’s main axis:

使用justify-end将项对齐到容器主轴的末端:

vue3示例：

<template>
  <div class="flex justify-end gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：水平空格填充

Use justify-between to justify items along the container’s main axis such that there is an equal amount of space between each item:

使用justify-between沿容器的主轴对项目进行对齐，使每个项目之间有相等的空间:

vue3示例：

<template>
  <div class="flex justify-between gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：水平空格环绕

Use justify-around to justify items along the container’s main axis such that there is an equal amount of space on each side of each item:

使用左右对齐来对齐容器主轴上的项目，这样每个项目的每一边都有等量的空间:

vue3示例：

<template>
  <div class="flex justify-around gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>

  <hr>
  <div class="flex justify-between gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

案例：每个空隙都相等

Use justify-evenly to justify items along the container’s main axis such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using justify-around:

使用justify- average来对齐容器主轴上的条目，这样每个条目周围就有等量的空间，但也要考虑到使用justify-around时通常在每个条目之间看到的双倍空间:

vue3案例：

<script setup>
</script>
<template>
  <div class="flex justify-around gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>

  <hr>
  <div class="flex justify-between gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>

  <hr>
  <div class="flex justify-evenly gap-3 bg-indigo-50 p-8">
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">1</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">2</div>
    <div class="w-1/4 h-20  bg-purple-500 rounded text-white font-bold flex items-center justify-center">3</div>
  </div>
</template>

justify-around是左右两边的空隙是相等的。所以，第一个元素的左边空隙和最后一个元素的右边空隙，只有其他空隙的一半大。

justify-evenly是每个空隙都是相等的。

justify-items 相关的样式类

Utilities for controlling how grid items are aligned along their inline axis.

用于控制网格项沿其行内轴如何对齐的实用程序。

基础样式

Class	Properties
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

justify-self 相关的样式类

Utilities for controlling how an individual grid item is aligned along its inline axis.

用于控制单个网格项沿其行内轴如何对齐的实用程序。

基础样式

Class	Properties
justify-self-auto	justify-self: auto;
justify-self-start	justify-self: start;
justify-self-end	justify-self: end;
justify-self-center	justify-self: center;
justify-self-stretch	justify-self: stretch;

algin-content 相关的样式类

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

用于控制在多行伸缩容器和网格容器中如何定位行的实用程序。

基础样式

Class	Properties
content-normal	align-content: normal;
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;
content-evenly	align-content: space-evenly;
content-baseline	align-content: baseline;
content-stretch	align-content: stretch;

align-items 相关的样式类

基础样式

Class	Properties
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

align-self 相关的样式类

基础样式

Class	Properties
self-auto	align-self: auto;
self-start	align-self: flex-start;
self-end	align-self: flex-end;
self-center	align-self: center;
self-stretch	align-self: stretch;
self-baseline	align-self: baseline;

place-content 相关的样式类

基础样式

Class	Properties
place-content-center	place-content: center;
place-content-start	place-content: start;
place-content-end	place-content: end;
place-content-between	place-content: space-between;
place-content-around	place-content: space-around;
place-content-evenly	place-content: space-evenly;
place-content-baseline	place-content: baseline;
place-content-stretch	place-content: stretch;

place-items 相关的样式类

基础样式

Class	Properties
place-items-start	place-items: start;
place-items-end	place-items: end;
place-items-center	place-items: center;
place-items-baseline	place-items: baseline;
place-items-stretch	place-items: stretch;

place-self 相关的样式类

基础样式

Class	Properties
place-self-auto	place-self: auto;
place-self-start	place-self: start;
place-self-end	place-self: end;
place-self-center	place-self: center;
place-self-stretch	place-self: stretch;