Day 06：「爱排队的兔兔有红萝卜！」- Flex 与 Grid

昨天被讨薪水，今天还在躲 ... 唉，
所以今天就不收作业了。

(兔导今天回学校兼课，带即将毕业的新兔演员。)

「兔导！ 想请问一下实务上有没有很便捷的排列方式呀？」

实务上嘛？ 好。

昨天啊，我刚好遇到这个排列与演员站位的问题，
用了简单的方法去解决，但还是不够完善，
让每个工作人员都忙得不可开交，

所以我们今天就来谈谈另外的方法吧！
 

材料

(带着学生们，来到了昨天拓宽的片场。)

(p.s. 图片仿画 line 贴图：居米公主13)

好，这是昨天拍防疫广告的场地，
我现在要你们每个人都站上去
来还原一下昨天拍摄的状况，我再来讲解。

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

( 昨天用完没复原的场地放在这里 )

「我们好了，兔导。」

嗯？ 准备好了是吗？
Okay，

不行啊！ 这样站根本不对啊！
学校老师教你们这样站的吗？ ... 真是的

算了，我来再讲一遍给你们知道。
 

显示模式 (display)

藉由显示模式这个功能，我们可以设定 / 改变元素显示方式或排列方式，例如 hidden 功能是将元素隐藏。

以下是预设可以使用的显示模式功能：

• block
• inline-block
• inline
• flex
• inline-flex
• table
• grid
  ...
• hidden

因为太多了，还有一些很不常用，这边就没有全部列出来罗！

同学们，实务上我们就很常用 flex 来排列 (让大家快速站位) 哦：

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8 flex">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

「兔导！ 看起来没差啊!」 (学生举手发问)

有啦，其实有差，牠门之间的空隙变小了哦。
但是这还不是全部啦，我们要搭配其它方法来使用！
 

间隙 (gap)

藉由 gap-{轴向}-{空隙} 这个功能，我们可以设定 / 改变 flex 或 grid 显示模式下元素间的空隙，例如 gap-y-4 功能是将元素之间 Y 轴的空隙设定为 1 rem。

以下是预设可以使用的间隙功能：

• 全部轴向
  • gap-0
  • gap-px
  • gap-1
  • ...
  • gap-80
  • gap-96
• X轴
  • gap-x-0
  • ...
  • gap-x-96
• Y轴
  • gap-y-0
  • ...
  • gap-y-96

之前有介绍过外距、内距、元素间距都可以设定为负值，但是间隙 (gap) 不存在负值哦，虽然没有负值，但空间域数值一样是 0～96！

所以现在只要用刚刚的 flex 搭上 gap-6 ，就可以让演员都保持昨天说的 1.5 rem 的社交安全距离了：

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8 flex gap-6">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

很好，是不是体验到它的快速方便了呢？

「兔导，可是好像哪里怪怪的」

哦，不错哦同学，观察入微。
怪怪的地方就是兔子们似乎变小只了！

因为啊 flex 预设是让内容物排成一列，但如果今天内容物排完超出场地空间大小，就会把牠们都缩小，来符合 100% 的空间哦！

不想要牠缩小的话，接下来可要专心听了。
 

弹性收缩 (flex-shrink)

藉由弹性收缩 (shrink) 这个功能，我们可以设定 / 改变 flex 显示模式下的元素是否允许收缩，例如 flex-shrink 功能是允许在空间不足时收缩。

以下是预设可以使用的弹性收缩功能：

• flex-shrink-0
• flex-shrink

现在，我们把每一只兔子都加上 flex-shrink-0 来确保牠们在空间不足时都不会被收缩：

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8 flex gap-6">
  <span class="兔 没口罩 flex-shrink-0"></span>
  <span class="兔 有口罩 flex-shrink-0"></span>
  <span class="兔 有口罩 flex-shrink-0"></span>
  <span class="兔 有口罩 flex-shrink-0"></span>
  <span class="兔 有口罩 flex-shrink-0"></span>
</div>

OK～每只兔子都有没有被缩小～但是！
你也看到了，有兔子出镜了，这样考试的时候是不合格的哦！

我们就先别用这个方法了，
接下来我再来介绍一个方式来试试看罗。
 

弹性包装 (flex-wrap)

透过弹性包装这个功能，我们可以设定 / 改变 flex 显示模式下子元素排列若超出宽度时是否换行，例如 flex-nowrap 功能是设定为超出宽度时仍不换行 。

以下是预设可以使用的弹性包装功能：

• flex-wrap
• flex-wrap-reverse
• flex-nowrap

既然知道功能是什麽了，我们这边就用 flex-wrap 来让兔子们换行，这样应该就不会被缩小了吧！

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8 flex gap-6 flex-wrap">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

是不是非常轻松呀～ 比起前面每个都加 flex-shrink-0，
现在这个方法真是太快速了！ 而且还不会出镜！

但是，学无止境
我们底下再来介绍其它的东西吧

( 「蛤...老师还不下课喔...」 )
 

弹性方向 (flex-direction)

透过 flex-{方向} 这个功能，我们可以设定 / 改变 flex 显示模式下子元素排列的方向，例如 flex-row-reverse 功能是设定为将子元素从右到左横向排列 。

以下是预设可以使用的弹性方向功能：

• flex-row
• flex-row-reverse
• flex-col
• flex-col-reverse

OK，玩点有趣的，我们用 flex-col 来让兔子们站一直排吧！

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8 flex gap-6 flex-wrap flex-col">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

超赞的！
不过 flex 的功能就差不多这些了，接下来换个口味！
 

网格栏数 (grid-template-columns)

透过 grid-cols-{栏数} 这个功能，我们可以设定 / 改变 grid 显示模式下子元素几栏分为一行，例如 grid-cols-12 功能是设定为 12 栏一行 。

以下是预设可以使用的网格栏数功能：

• grid-cols-1
• grid-cols-2
• grid-cols-3
  ...
• grid-cols-11
• grid-cols-12
• grid-cols-none

来试试看吧，用 grid 取代目前 flex 宽度不足时自动换行的功能。flex flex-wrap 去掉，改用 grid grid-cols-4 ，其实效果是一样的哦：

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8 grid gap-6 grid-cols-4">
  <span class="兔 没口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

看起来完全一模一样呢。

但是要注意哦，会刚好一样是因为我们现在让它每四个一行
如果换成其它数字当然就长不一样罗！
 

网格跨栏 (grid-column start/end)

透过 col-{模式}-{栏数/位置} 这个功能，我们可以设定 / 改变 grid 显示模式下子元素跨栏的情形，例如在 12 栏一行的情况下，col-span-6 功能是设定为 横跨 6 栏，看起来就会占了整行一半的空间 。

以下是预设可以使用的网格跨栏功能：

• 自动计算
  • col-auto
• 横跨 (span)
  • col-span-1
  • col-span-2
  • col-span-3
    ...
  • col-span-11
  • col-span-12
  • col-span-full
• 起始栏 (start)
  • col-start-1
  • col-start-2
    ...
  • col-start-12
  • col-start-13
  • col-start-auto
• 结束栏 (end)
  • col-end-1
  • col-end-2
    ...
  • col-end-12
  • col-end-13
  • col-end-auto

这边值得注意的一点是，结束栏的数法很特别。以开始栏为例，col-start-2 是把起始点设在第二栏；但是结束栏不同，col-end-2 是把结束点设在第二栏之前。

所以假设是以昨天拍戏的情况，我们要让大家远离破口兔，就直接让破口兔自己站一排即可！ 我们这里帮破口兔加上 col-start-2 col-span-3：

<div id="卫生所" class="bg-red-200 m-20 px-5 py-8 grid grid-cols-4 gap-6">
  <span class="兔 没口罩 col-start-2 col-span-3"></span>
  <!-- code 也要保持距离，以策安全 --> 
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
  <span class="兔 有口罩"></span>
</div>

很方便欸！ 这样牠就自己一排了！

不过可能有人不太了解为什麽会是这个效果，
我们这边简单的图解一下。

先看绿色的部分，破口兔被设定了 col-start-2 所以跑到了第二栏；再来是红色部分，因为设定了 col-span-3 所以从破口兔自己那格开始数，空间总共横跨三格。

这样，应该可以理解吧！

(底下学生一片沉寂、鸦雀无声...)
 

呃，好啦。 今天补充的东西就差不多这样。
同学们可以下课了！

「谢谢兔导！」「欸靠他补充超久的啦，我终於可以回家了」

「等一下吃什麽！那边有一间新...」 「谢谢老师～」

唉，好累喔。
都不知道有没有听进去还补充这麽多，
做老师就是这样吃力不讨好，要不是要赚外快来付薪水...

欸！？

给你们的回家作业：

• 作业实施要点：
  • 试试看 flex 和 grid，比较一下与昨天的差异或如何一起运用
• 还没复原的片场：点我瞬移到片场
• 今天兼差很累，没有作业
   

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营

( # 兔兔小声说 )

「兔导，辛苦罗，我在外面等你很久了馁」

我 ... 呃 ... 你怎麽在这里呢？ (苦笑)
我昨天说了嘛 ... 就还在周 ...

「少废话！ 那你今天赚的都先拿来！」

欸 ... 是 ... (递钱)