快速提示：运输弹性CSS组件

>本文演示了CSS中的容器查询如何创建具有内置布局变化的可重复使用的组件，从而实现了“构建一次，部署到处都可以部署”方法。 该示例着重于适应不同屏幕尺寸的订阅表单。

表格利用CSS网格来布局灵活性。 定义了三个网格区域（传奇，字段，提交），并使用容器查询根据容器的宽度进行更改。 视频显示了布局调整。

>

元素被指定为使用.subscription-form的容器。 嵌套container-type: inline-size;div是由容器查询靶向的：> .form__content

>第一个容器查询（

<code class="language-css">.subscription-form {
  container-type: inline-size;
}

.form__content {
  display: grid;
  gap: 1rem;
}</code>

）定义了中型布局的网格模板：

@container (min-width: 375px)

第二个查询（

<code class="language-css">@container (min-width: 375px) {
  .form__content {
    grid-template-areas: 
            "legend field" 
            "legend submit";
    align-items: center;
    column-gap: 2rem;
  }
  /* ... grid area assignments for legend, .form-group, button ... */
}</code>

）调整了较大屏幕的布局：

@container (min-width: 700px)

另一个视频展示了响应行为。

<code class="language-css">@container (min-width: 700px) {
  .form__content {
    grid-template-areas: "legend field submit";
  }
  button {
    align-self: end;
  }
}</code>

> Codepen演示提供了一个实时的交互式示例。 这种方法展示了容器查询以创建可重复使用和适应性的CSS组件的功能。 此摘录源于

释放CSS

>的力量。

以上是快速提示：运输弹性CSS组件的详细内容。更多信息请关注PHP中文网其他相关文章！