Python私教张大鹏 Vue3整合Tailwindcss之space样式类

基础样式

基础样式总结

关键字：

• x：水平方向
• y：垂直方向

数字：

• 0到12是连续的，步长为1
• 12到52的步长是2
• 52到64的步长是4
• 64到80的步长是8
• 最大的数是96

案例：设置水平方向的间距

需求：在一行设置三个盒子，然后设置这三个盒子之间的间距，观察效果。

vue3示例：

<script setup>
</script>
<template>
  <div class="flex p-8 bg-indigo-50 space-x-12">
    <div class="h-32 bg-indigo-500 flex-1"></div>
    <div class="h-32 bg-indigo-500 flex-1"></div>
    <div class="h-32 bg-indigo-500 flex-1"></div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10

案例：设置垂直方向的间距

需求：使用flex在一列设置三个盒子，然后设置这三个盒子垂直方向上的间距，观察效果。

vue3示例：

<script setup>
</script>
<template>
  <div class="flex flex-col bg-indigo-50 p-8 space-y-3">
    <div class="w-full h-32 bg-indigo-500"></div>
    <div class="w-full h-32 bg-indigo-500"></div>
    <div class="w-full h-32 bg-indigo-500"></div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10

案例：设置反序后间距

需求：在一行显示三个盒子，然后让这三个盒子反序显示。之后，设置反序后盒子的间距，观察效果。

关键样式：flex-row-reverse space-x-reverse

vue3示例：

<script setup>
</script>
<template>
  <div class="flex flex-row-reverse bg-indigo-50 p-8 space-x-3 space-x-reverse">
    <div class="h-32 bg-indigo-500 flex-1 rounded font-bold text-white text-3xl flex justify-center items-center">1</div>
    <div class="h-32 bg-indigo-500 flex-1 rounded font-bold text-white text-3xl flex justify-center items-center">2</div>
    <div class="h-32 bg-indigo-500 flex-1 rounded font-bold text-white text-3xl flex justify-center items-center">3</div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10

案例：间距可以是负数

需求：在一行设置两个盒子，然第一个盒子的顶部外边距比第二个盒子的顶部外边距小，并给这两个盒子设置不同的背景色。之后，给盒子之间的间距设置为负数，观察效果。

vue3示例：

<script setup>
</script>
<template>
  <div class="flex p-8 bg-indigo-50 space-x-3">
    <div class="h-32 flex-1 bg-indigo-500 mt-3"></div>
    <div class="h-32 flex-1 bg-yellow-400 mt-12"></div>
  </div>

  <hr>
  <div class="flex p-8 bg-indigo-50 -space-x-3">
    <div class="h-32 flex-1 bg-indigo-500 mt-3"></div>
    <div class="h-32 flex-1 bg-yellow-400 mt-12"></div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15