当前位置：首页 > news >正文

Tailwindcss Flex 布局相关的样式类及其实战案例

news 来源：原创 2024/9/29 4:38:58

007 Flex布局相关的样式

flex-basics 相关的样式类

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-direction 相关的样式类

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;

flex-wrap 相关的样式类

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

flex 相关的样式类

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

flex-grow 相关的样式类

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

flex-shrink 相关的样式类

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

order 相关的样式类

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;

案例1：垂直居中对齐

<script setup>
</script><template><!--flex：将盒子的布局设置为flex布局items-center：元素垂直居中对齐--><div class="flex items-center"><div class="w-32 h-32 bg-red-300"></div><div><strong>strong加粗的字体</strong><span>span普通的字体</span></div></div>
</template><style scoped>
</style>

案例2：行内flex布局

<script setup>
</script><template><!--inline-flex：将盒子的布局设置为 inline-flex 布局items-baseline：元素基线对齐--><p>正常的文本描述<span class="inline-flex items-baseline"><div class="self-center w-5 h-5 rounded-full mx-1 bg-red-300"/><span>张大鹏</span></span>正常的文本描述。。。</p>
</template><style scoped>
</style>

案例3：控制flex元素占据的宽度

<template><div class="flex flex-row gap-3"><div class="basis-1/4 bg-purple-500">01</div><div class="basis-1/4 bg-purple-500">02</div><div class="basis-1/2 bg-purple-500">03</div></div>
</template>

案例4：flex-row-reverse 控制一行反序显示

<template><div class="flex flex-row-reverse gap-3 w-32 p-3 bg-emerald-200"><div class="bg-purple-500">01</div><div class="bg-purple-500">02</div><div class="bg-purple-500">03</div></div>
</template>

案例5：flex-col 控制一列显示

<template><div class="flex flex-col gap-3 w-32 p-3 bg-emerald-200"><div class="bg-purple-500">01</div><div class="bg-purple-500">02</div><div class="bg-purple-500">03</div></div>
</template>

案例6：flex-col-reverse 控制一列反序显示

<template><div class="flex flex-col-reverse gap-3 w-32 p-3 bg-emerald-200"><div class="bg-purple-500">01</div><div class="bg-purple-500">02</div><div class="bg-purple-500">03</div></div>
</template>

案例7：flex-wrap 控制换行

<template><div class="flex flex-wrap gap-3 w-32 p-3 bg-emerald-200"><div class="w-10 bg-purple-500">01</div><div class="w-10 bg-purple-500">02</div><div class="w-10 bg-purple-500">03</div></div>
</template>

案例8：flex-wrap-reverse 控制换行并反序

<template><div class="flex flex-wrap-reverse gap-3 w-32 p-3 bg-emerald-200"><div class="w-10 bg-purple-500">01</div><div class="w-10 bg-purple-500">02</div><div class="w-10 bg-purple-500">03</div></div>
</template>

案例9：使用 order 控制显示顺序

<template><div class="flex flex-wrap gap-3 w-32 p-3 bg-emerald-200"><div class="w-10 bg-purple-500 order-last">01</div><div class="w-10 bg-purple-500">02</div><div class="w-10 bg-purple-500">03</div></div>
</template>