コンテナクエリ
親(祖先)要素のサイズに応じてスタイルを切り替えるやつ
親要素にcontainer-typeプロパティをつけて、コンテナ内の要素には@containerクエリとmin-widthやmax-widthでサイズに基づくスタイルを定義する
container-typeとcontainer-nameのshorthandとしてcontainも使える
こんな感じ
code:css
.parent {
contain: inline-size;
}
@container (min-width: 640px) {
.child {
display: flex;
}
}