iT邦幫忙

2021 iThome 鐵人賽

DAY 6
2
Modern Web

排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!系列 第 7

Day 06:「愛排隊的兔兔有紅蘿蔔!」- Flex 與 Grid

Day06-Banner

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

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

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

實務上嘛? 好。

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

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

carrotPoint 材料

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


(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,

不行啊! 這樣站根本不對啊!
學校老師教你們這樣站的嗎? ... 真是的

算了,我來再講一遍給你們知道。
 

carrotPoint 顯示模式 (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>

「兔導! 看起來沒差啊!」 (學生舉手發問)

有啦,其實有差,牠門之間的空隙變小了哦。
但是這還不是全部啦,我們要搭配其它方法來使用!
 

carrotPoint 間隙 (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% 的空間哦!

不想要牠縮小的話,接下來可要專心聽了。
 

carrotPoint 彈性收縮 (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~每隻兔子都有沒有被縮小~但是!
你也看到了,有兔子出鏡了,這樣考試的時候是不合格的哦!

我們就先別用這個方法了,
接下來我再來介紹一個方式來試試看囉。
 

carrotPoint 彈性包裝 (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
現在這個方法真是太快速了! 而且還不會出鏡!

但是,學無止境
我們底下再來介紹其它的東西吧

( 「蛤...老師還不下課喔...」 )
 

carrotPoint 彈性方向 (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 的功能就差不多這些了,接下來換個口味!
 

carrotPoint 網格欄數 (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>

看起來完全一模一樣呢。

但是要注意哦,會剛好一樣是因為我們現在讓它每四個一行
如果換成其它數字當然就長不一樣囉!
 

carrotPoint 網格跨欄 (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 所以從破口兔自己那格開始數,空間總共橫跨三格。

這樣,應該可以理解吧!

(底下學生一片沉寂、鴉雀無聲...)
 

呃,好啦。 今天補充的東西就差不多這樣。
同學們可以下課了!

「謝謝兔導!」「欸靠他補充超久的啦,我終於可以回家了」

「等一下吃什麼!那邊有一間新...」 「謝謝老師~」

唉,好累喔。
都不知道有沒有聽進去還補充這麼多,
做老師就是這樣吃力不討好,要不是要賺外快來付薪水...

欸!?

carrotPoint 給你們的回家作業:

  • 作業實施要點:
    • 試試看 flex 和 grid,比較一下與昨天的差異或如何一起運用
  • 還沒復原的片場:點我瞬移到片場
  • 今天兼差很累,沒有作業
     

關於兔兔們:


 


( # 兔兔小聲說 )

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

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

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

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


上一篇
Day 05:「別過來!要保持社交距離!」 Tailwind 中的空間與距離
下一篇
Day 07:「金魚模仿遊戲~」- 用 Tailwind 來對齊內容
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32

尚未有邦友留言

立即登入留言