前言

前陣子我做了一款小遊戲 — Flex Pirate，讓大家可以透過玩遊戲的方式精通 Flexbox 的應用。
在第一版釋出時，從反饋中可以得知，多數玩家希望遊戲中可以添加各單元的教學文章，因此在第二版製作的同時，我也在這裡寫了幾篇教學文案以及範例，並將關卡放置相對應的文章連結，提供給大家參考參考。

Flexbox 是甚麼

Flexbox 顧名思義就是彈性的盒子，這個模型讓排版變得容易許多，延伸並取代了許多用來對齊的屬性定義，例如: justify-content, align-items, align-self, align-content 等屬性。

Flexbox 的概念

Flexbox 具有主軸起點、終點、尺寸與交錯軸起點、終點、尺寸的特性可以進行布局規畫

圖片取自 W3C 文章，範例圖片應用在 flex-direction: row 的情境下

Display

範例網址: https://codepen.io/peiqun/pen/mZqEdx

若想在 A 元素裡的子元素 b 上，使用 flexbox 進行排版的話，需要在 A 元素上寫入 display:flex 的語法，預設效果會將 A 裡的所有子元素並排。
與 block 和 inline 概念上比較不一樣的地方是，一般我們要將 b 元素加入 display:inline-block 或是 display:block 的效果時，會直接將語法寫在 b 元素上，但如果是想加入 flex 的效果，就需要將語法寫入父元素，這樣父元素裡的所有子元素都可以使用 flexbox 模型，還可以針對單一個子元素進行調整，相當彈性。

Flexbox 測試工具

我開發了一個 Flexbox 測試工具提供給大家練習，請慢用 :D
工具連結: https://codepen.io/peiqun/pen/WYzzYX