CSS 参考

Appearance

container ​

container 属性定义容器查询的名称和类型。

语法 ​

css
container: <container-name> / <container-type>;

常见值 ​

值说明示例
<container-name>容器名称container: my-container / size
<container-type>容器类型container: my-container / inline-size
none无容器container: none

示例 ​

基础用法 ​

css
/* 定义容器名称和类型 */
.container {
  container: my-container / size;
}

/* 只定义容器名称 */
.container {
  container-name: my-container;
}

/* 只定义容器类型 */
.container {
  container-type: size;
}

高级用法 ​

css
/* 定义容器 */
.card-container {
  container: card / inline-size;
}

/* 查询容器 */
@container card (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* 响应式布局 */
@container card (min-width: 800px) {
  .card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 卡片布局 */
@container card (min-width: 1000px) {
  .card {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

浏览器兼容性 ​

浏览器版本
Chrome105+
Firefox110+
Safari16.1+
Edge105+
iOS Safari16.1+
Android Browser105+
Chrome for Android105+

注意事项 ​

  • container 属性用于定义容器查询的名称和类型
  • 容器查询允许根据容器的大小而不是视口大小来调整布局
  • container-type 可以是 size、inline-size、block-size 或 normal
  • container-name 可以是任意标识符，用于在 @container 规则中引用

相关属性 ​

相关资源 ​