使用Flexbox布局创建一个包含三个子元素的容器，这些子元素应该水平排列，并且当容器宽度减小时，它们应该能够适当地缩小或换行显示。

Question

1.Flexbox布局：题目：使用Flexbox布局创建一个包含三个子元素的容器，这些子元素应该水平排列，并且当容器宽度减小时，它们应该能够适当地缩小或换行显示。
a.提示：使用display: flex;, flex-wrap: wrap;等属性。

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这是一个使用Flexbox布局创建包含三个子元素的容器的基本示例。这些子元素将水平排列，并且当容器宽度减小时，它们会适当地缩小或换行显示。下面是相关的CSS样式代码：

.container {
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: wrap; /* 子元素在容器宽度不足时会换行显示 */
  justify-content: space-between; /* 子元素之间的空间均匀分布 */
}

.item {
  flex: 1 1 auto; /* 子元素有相等的空间和伸缩性 */
  margin: 10px; /* 子元素间的边距 */
  box-sizing: border-box; /* 边框和填充在元素的总宽度（或高度）之内 */
}

对于HTML部分，你需要创建一个包含三个子元素的容器，如下所示：

<div class="container">
  <div class="item">子元素 1</div>
  <div class="item">子元素 2</div>
  <div class="item">子元素 3</div>
</div>

在这个例子中，.container是应用了Flexbox布局的容器，而.item则是容器内的子元素。使用flex-wrap: wrap;属性，当容器宽度减小时，子元素会适当地缩小并在需要时换行显示。justify-content: space-between;属性确保子元素之间的空间均匀分布。flex: 1 1 auto;属性使得所有子元素都有相等的伸缩性和空间。