昨天被討薪水，今天還在躲 ... 唉，
所以今天就不收作業了。

(兔導今天回學校兼課，帶即將畢業的新兔演員。)

「兔導！ 想請問一下實務上有沒有很便捷的排列方式呀？」

實務上嘛？ 好。

昨天啊，我剛好遇到這個排列與演員站位的問題，
用了簡單的方法去解決，但還是不夠完善，
讓每個工作人員都忙得不可開交，

所以我們今天就來談談另外的方法吧！
 

材料

(帶著學生們，來到了昨天拓寬的片場。)

(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 (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

「兔導，辛苦囉，我在外面等你很久了餒」

我 ... 呃 ... 你怎麼在這裡呢？ (苦笑)
我昨天說了嘛 ... 就還在周 ...

「少廢話！ 那你今天賺的都先拿來！」

欸 ... 是 ... (遞錢)