iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

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

Day 07:「金魚模仿遊戲~」- 用 Tailwind 來對齊內容

Day07-Banner

(今天切換故事主線了喔,別再吐倒了哦)

相信很多在前端打滾、需要用到 CSS 的人,一定或多或少都看過 Amos 的金魚也能懂系列鐵人賽文章吧? 還記得有一個主題特別的讓我印象深刻,特別到我都忘記他其它年到底都寫過些什麼了, 那個主題主要就是:

「連續三十天實作不同方式的垂直置中」

當下看到真的是嘆為觀止,因為方式好多樣化!
(而且這個主題還是剛好他唯一一篇不是金魚系列的文章)

所以為了致敬一下,
我們今天就來玩玩 「金魚模仿遊戲吧!」
(註1)
 

carrotPoint 備料

  • 金魚 兩條
  • 魚缸 一個
  • 清水 一盆

這邊我已經幫各位先準備好一個魚缸和兩條可愛的小金魚 ,準備開始煮水囉:

<div id="魚缸" class="w-96 h-64 flex">
  <div id="金魚"></div>
  <div id="金魚"></div>
</div>

就放在這間水族館,快過去看看吧!

但是,聽說老闆賣的這兩條金魚生病了,雖然沒什麼力氣移動,
不過我們可以用 Tailwind 來幫助牠們!
 

carrotPoint 內容對齊 (justify-content)

藉由 justify-{準軸點} 這個功能,我們可以設定 / 改變 flex 顯示模式下子元素在主準軸上對齊的方式,例如 justify-end 功能是將子元素在主準軸上置底

以下是預設可以使用的內容對齊功能:

  • justify-start
  • justify-end
  • justify-center
  • justify-between
  • justify-around
  • justify-evenly

這邊可能會覺得前面的敘述有點難懂,所謂的主準軸就是看 flex 的方向而定。flex 預設為橫向排列,那麼這時 justify 就是在橫軸上移動,比如 justify-end 會讓東西都置右; 但如果今天 flex 排列方向用 flex-col 調整為直向,那麼 justify-end 功能就會是置底。 這邊有簡單圖解。

 

我們這邊,來試著讓金魚們水平均分所有空間,
那就要用到 justify-evenly

<div id="魚缸" class="w-96 h-64 flex justify-evenly">
  <div id="金魚"></div>
  <div id="金魚"></div>
</div>

太好了~ 就是像這樣別讓牠們擠在一起,
就算沒病也悶出病來了。

不過牠們是不是身體有一半都沒泡到水呀?
我們快來幫助牠潛下去!
 

carrotPoint 項目對準 (align-items)

藉由 items-{準軸點} 這個功能,我們可以設定 / 改變 flex 或 grid 顯示模式下子元素在副準軸上對齊、延展的方式,例如 items-end 功能是將子元素在副準軸上置底

以下是預設可以使用的項目對準功能:

  • items-start
  • items-end
  • items-center
  • items-baseline
  • items-stretch

這邊一樣,可能覺得前面的敘述還是有點難懂,就再解釋一次。所謂的副準軸就是看 flex 的方向而定 (此功能也可用在 grid)。

flex 預設為橫向排列,那麼這時 items 就是在縱軸上移動,比如 items-end 會讓東西都置底; 但如果今天 flex 排列方向用 flex-col 調整為直向,那麼 items-end 功能就會是置右。 一樣上個簡單圖解。

 

我們這邊用 items-center 讓魚兒們可以在水深的最中心。:

<div id="魚缸" class="w-96 h-64 flex justify-evenly items-center">
  <div id="金魚"></div>
  <div id="金魚"></div>
</div>

這樣,金魚們就可以順利的換位置了耶!
這麼一來,牠們空間變舒適了,病應該也好得更快哦~
 

carrotPoint justify 補充說明

雖然已經搞懂了複雜的主軸和副軸,但是實際使用一次就會發現在內容對齊 (justify-content) 內有三個屬性的效果很類似,不同於另外三個,分別是 justify-betweenjustify-aroundjustify-evenly

between

justify-between 的功能是第一個元素置頂和最後一個元素置底,剩下的空間水平均分。

around

justify-around 的功能是所有元素保持與外界相同距離,斜線區塊就是各元素所保持的空間。

evenly

justify-evenly 的功能是將子元素完全水平均分在空間之中,每個元素與邊界及彼此的距離都相同。

 

今天內容比較少,因為內容也比較複雜一些。
希望上面的東西對你們有幫助!

下個篇章開始就更好玩囉~
因為我們要來幫助被慣老闆欺負的員工!
 

carrotPoint 給你們的回家作業:

  • 作業實施要點:
    • 試著改變魚缸,讓魚缸水更深。
    • 讓兩條小金魚一條在水面,另一條在水底。
    • 試著增加更多條金魚,且改用 grid 完成,而不是 flex
  • 快不行的小金魚:快去拯救!
  • 拯救完的小金魚:點我探望
     

[註1] 會以模仿遊戲做為本篇的命名是因為要致敬一位超級重要的學者,艾倫圖靈。
模仿遊戲是一部闡述二戰時期破譯敵軍加密機過程的歷史劇情電影,同時也是被稱為計算機之父、人工智慧之父 - 圖靈人生的一段故事。

 


關於兔兔們:


 


( # 兔兔小聲說 )

身為兔子,聽力都特別靈敏,因為我們有長長的大耳朵。
有一次比賽自己聽到了什麼,
朋友們表示牠們聽到了一兩公里外的風吹草動,
而我聽見下雨的聲音


上一篇
Day 06:「愛排隊的兔兔有紅蘿蔔!」- Flex 與 Grid
下一篇
Day 08:「兔老闆的文件」- 半透明的我及有陰影的你
系列文
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件開發!32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言