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

最新推荐文章于 2025-05-19 08:50:23 发布

源滚滚AI Python私教10年

最新推荐文章于 2025-05-19 08:50:23 发布

阅读量1.3k

点赞数 28

CC 4.0 BY-SA版权

分类专栏： CSS Vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_37703224/article/details/139423313

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>