容器名称 | CSS-Tricks

CSS 的 container-name 属性用于将元素注册为容器，该容器根据容器的大小和样式将样式应用于其他元素。

.parent {
  container-name: cards;
  container-type: inline-size;
}

@container cards (width > 800px) {
  .child {
    width: 50cqi;
  }
}

在此示例中，我们使用 .parent 类中的元素注册了一个名为 cards 的新容器，该容器查看元素的 inline-size（即，在标准水平书写模式下的 width）并在容器大于 800px 时更改 .child 元素的大小，当与 @container 一起使用以查询特定容器时。

语法

container-name: none | <custom-ident>+;

初始值：none
应用于：所有元素
继承：否
百分比：N/A
计算值：none 或标识符的有序列表
规范顺序：根据语法
动画：不可动画

值

container-name 属性接受一个值或多个值，值之间用单个空格分隔。

/* No container */
container-name: none;

/* Single value */
container-name: wrapper;

/* Two values */
container-name: wrapper hero-banner;

/* Global Values */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;

none：元素没有容器名称。默认情况下为真，因此您可能永远不会使用此值，因为其用途纯粹是设置属性的默认行为。
<custom-ident>：这是容器的名称，可以是任何内容，但不能是为其他函数保留的单词，包括 default、none、at、no 和 or。请注意，名称不包含在引号中。

它与 `container-type` 属性一起使用

没错，请确保将 container-name 与 container-type 一起使用，以正确注册可以通过其大小查询的特定容器。名称标识它，类型创建一个包含上下文。

.parent {
  container-name: cards;
  container-type: inline-size;
}

也就是说……

命名容器是可选的

未命名的容器将匹配任何不显式定位特定容器名称的 @container 查询。

.parent {
  container-type: inline-size;
}

/* Matches any container, named or unnamed */
@container (width < 600px) {
  .child {
    width: 100cqi;
  }
}

它包含在 `container` 简写属性中

如果您不想将 container-name 和 container-type 作为单独的声明编写（谁会怪你呢？），那么您可以改用 container 简写属性，它将这两个属性合并到一个声明中，并用正斜杠 (/) 分隔。

.parent {
  container: cards / inline-size;

  /* Equivalent to: */
  container-name: cards;
  container-type: inline-size;
}

使用多个容器名称

前面我们提到过，只要用空格分隔，就可以在元素上设置多个容器名称。

.parent {
  container: layout hero-banner / inline-size;

  /* Or */
  container-name: layout hero-banner;
  container-type: inline-size;
}

当我们这样做时，我们可以在多个条件为真的情况下查询容器。

@container layout (width < 600px) {
  article {
    flex-direction: column;
  }
}

@container hero-banner (width > 400px) {
  article h2 {
    font-size: 2rem;
  }
}