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

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>