防御式CSS—Flexbox 折行

CSS flexbox是当今最有用的CSS布局功能之一。很容易将 display: flex 添加到包装器中，并使子项彼此相邻排序。

这是一个典型的例子。我们有一组选项，应该显示在彼此旁边。

.options-list {
  display: flex;
}

当空间不足时，将出现水平滚动。这应该是意料之中的，实际上并不是一个“问题”。

请注意，这些项目仍然彼此相邻。为了解决这个问题，我们需要允许Flex包装。

.options-list {
    display: flex;
    flex-wrap: wrap;
}