測試你的技能：Flexbox

此技能測試的目的是評估你是否瞭解 Flexbox 和 Flex 專案的行為。以下是您可能使用 Flexbox 建立的四種常見的

注意： 您可以在此頁面上的互動式編輯器或線上編輯器（如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到困難，可以透過我們的聯絡渠道聯絡我們。

任務 1

在本任務中，列表項是網站的導航。它們應該以一行排列，每個專案之間有相同的間距。

最終結果應如下面的圖片所示

Flex items laid out as a row with space between them.

嘗試更新下面的即時程式碼以重現完成的示例

下載此任務的起點以在您自己的編輯器或線上編輯器中進行工作。

在本任務中，列表項的大小都不相同，但我們希望它們顯示為三個等大小的列，無論每個專案中的內容是什麼。

最終結果應如下面的圖片所示

Flex items laid out as three equal size columns with different amounts of content.

嘗試更新下面的即時程式碼以重現完成的示例

附加問題

下載此任務的起點以在您自己的編輯器或線上編輯器中進行工作。

在本任務中，下面的 HTML 中有兩個元素，一個具有類 parent 的 <div> 元素，它包含另一個具有類 child 的 <div> 元素。使用 flexbox 將子元素居中於父元素中。請注意，這裡不止一種可能的解決方案。

最終結果應如下面的圖片所示

A box centered inside another box.

嘗試更新下面的即時程式碼以重現完成的示例

下載此任務的起點以在您自己的編輯器或線上編輯器中進行工作。

在本任務中，我們希望您將這些專案排列成行，如下面的圖片所示

A set of items displayed as rows.

嘗試更新下面的即時程式碼以重現完成的示例

下載此任務的起點以在您自己的編輯器或線上編輯器中進行工作。