如何创建这样的元素(自适应)？

要创建自适应元素，可以使用CSS中的弹性盒子布局（Flexbox）或网格布局（Grid）来实现。这些布局技术可以帮助我们轻松地创建适应不同屏幕尺寸和设备的元素。

使用Flexbox布局，可以通过设置容器的display属性为"flex"，然后使用flex属性来控制元素的大小和位置。以下是一个简单的示例：

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

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
}

在上面的示例中，容器使用flex布局，并设置了justify-content属性为"space-between"，这将使元素在容器中均匀分布。每个元素都设置了flex属性为1，这意味着它们将平均占据可用空间。

使用Grid布局，可以通过设置容器的display属性为"grid"，然后使用grid-template-columns属性来定义列的大小。以下是一个简单的示例：

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

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.item {
  /* 可以添加样式来设置元素的外观 */
}

在上面的示例中，容器使用grid布局，并设置了grid-template-columns属性为"repeat(auto-fit, minmax(200px, 1fr))"，这将使列自适应容器的宽度，并且每个列的最小宽度为200px。

这些布局技术可以根据需要进行进一步的定制和调整，以满足不同的自适应需求。在实际开发中，可以根据具体情况选择使用Flexbox布局还是Grid布局，或者结合两者来创建自适应元素。