测试你的技能：弹性盒
该技能测试的目的是评估你是否了解 弹性盒和弹性项目 的行为方式。以下是你可以使用 Flexbox 创建的四种常见设计模式。你的任务是构建它们。
¥The aim of this skill test is to assess whether you understand how flexbox and flex items behave. Below are four common design patterns that you might use flexbox to create. Your task is to build them.
注意：你可以在此页面上的交互式编辑器或在线编辑器（例如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。
¥Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen, JSFiddle, or Glitch.
如果你遇到困难，可以通过我们的 沟通渠道 之一与我们联系。
¥If you get stuck, you can reach out to us in one of our communication channels.
任务 1
¥Task 1
在此任务中，列表项是站点的导航。它们应该排成一行，每个项目之间的间距相等。
¥In this task, the list items are the navigation for a site. They should be laid out as a row, with an equal amount of space between each item.
你的最终结果应如下图所示：
¥Your final result should look like the image below:
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.
任务 2
¥Task 2
在此任务中，列表项的大小都不同，但我们希望它们显示为三个相同大小的列，无论每个项中的内容是什么。
¥In this task, the list items are all different sizes, but we want them to be displayed as three equal sized columns, no matter what content is in each item.
你的最终结果应如下图所示：
¥Your final result should look like the image below:
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
附加问题：
¥Additional question:
- 你现在可以将第一个项目制作为其他项目大小的两倍吗？
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.
任务 3
¥Task 3
在此任务中，下面的 HTML 中有两个元素，一个类为 parent 的 <div> 元素，其中包含另一个类为 child 的 <div> 元素。使用 Flexbox 将子项置于父项的中心。请注意，这里不只有一种可能的解决方案。
¥In this task, there are two elements in the HTML below, a <div> element with a class of parent which contains another <div> element with a class of child. Use flexbox to center the child inside the parent. Note that there is not just one possible solution here.
你的最终结果应如下图所示：
¥Your final result should look like the image below:
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.
任务 4
¥Task 4
在此任务中，我们希望你将这些项目排列成行，如下图所示：
¥In this task, we want you to arrange these items into rows as in the image below:
尝试更新下面的实时代码以重新创建完成的示例：
¥Try updating the live code below to recreate the finished example:
下载此任务的起点 在你自己的编辑器或在线编辑器中工作。
¥Download the starting point for this task to work in your own editor or in an online editor.