Day 07：「金鱼模仿游戏～」- 用 Tailwind 来对齐内容

(今天切换故事主线了喔，别再吐倒了哦)

相信很多在前端打滚、需要用到 CSS 的人，一定或多或少都看过 Amos 的金鱼也能懂系列铁人赛文章吧？ 还记得有一个主题特别的让我印象深刻，特别到我都忘记他其它年到底都写过些什麽了， 那个主题主要就是：

「连续三十天实作不同方式的垂直置中」

当下看到真的是叹为观止，因为方式好多样化！
(而且这个主题还是刚好他唯一一篇不是金鱼系列的文章)

所以为了致敬一下，
我们今天就来玩玩 「金鱼模仿游戏吧！」
(注1)
 

备料

• 金鱼 两条
• 鱼缸 一个
• 清水 一盆

这边我已经帮各位先准备好一个鱼缸和两条可爱的小金鱼 ，准备开始煮水罗：

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

就放在这间水族馆，快过去看看吧！

但是，听说老板卖的这两条金鱼生病了，虽然没什麽力气移动，
不过我们可以用 Tailwind 来帮助牠们！
 

内容对齐 (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>

太好了～ 就是像这样别让牠们挤在一起，
就算没病也闷出病来了。

不过牠们是不是身体有一半都没泡到水呀？
我们快来帮助牠潜下去！
 

项目对准 (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>

这样，金鱼们就可以顺利的换位置了耶！
这麽一来，牠们空间变舒适了，病应该也好得更快哦～
 

justify 补充说明

虽然已经搞懂了复杂的主轴和副轴，但是实际使用一次就会发现在内容对齐 (justify-content) 内有三个属性的效果很类似，不同於另外三个，分别是 justify-between、justify-around、justify-evenly。

between

justify-between 的功能是第一个元素置顶和最後一个元素置底，剩下的空间水平均分。

around

justify-around 的功能是所有元素保持与外界相同距离，斜线区块就是各元素所保持的空间。

evenly

justify-evenly 的功能是将子元素完全水平均分在空间之中，每个元素与边界及彼此的距离都相同。

今天内容比较少，因为内容也比较复杂一些。
希望上面的东西对你们有帮助！

下个篇章开始就更好玩罗～
因为我们要来帮助被惯老板欺负的员工！
 

给你们的回家作业：

• 作业实施要点：
  • 试着改变鱼缸，让鱼缸水更深。
  • 让两条小金鱼一条在水面，另一条在水底。
  • 试着增加更多条金鱼，且改用 grid 完成，而不是 flex
• 快不行的小金鱼：快去拯救！
• 拯救完的小金鱼：点我探望
   

[注1] 会以模仿游戏做为本篇的命名是因为要致敬一位超级重要的学者，艾伦图灵。
模仿游戏是一部阐述二战时期破译敌军加密机过程的历史剧情电影，同时也是被称为计算机之父、人工智慧之父 - 图灵人生的一段故事。

关於兔兔们：

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

( # 兔兔小声说 )

身为兔子，听力都特别灵敏，因为我们有长长的大耳朵。
有一次比赛自己听到了什麽，
朋友们表示牠们听到了一两公里外的风吹草动，
而我听见下雨的声音。