容器查询用于“这个元素外面有足够的空间吗？”

Say you had a UI component that had pagination arrows for whatever reason. If there was enough space on the outside of that component, you wanted to put those arrows outside, like this this:

假设你有一个UI组件，出于某种原因有分页箭头。如果在该组件的外部有足够的空间，你想把这些箭头放在外面，就像这样：

But if there isn’t enough room for them without shrinking the main content area, then place them inside, like this:

但是如果没有足够的空间放置它们而不缩小主要内容区域，那么就把它们放在内部，像这样：

You could do that with plenty of magic numbers, especially in how big the main content area is. But wouldn’t it be cool if you didn’t have to know? Like the main content area could be whatever, fluid/responsive/flexible, and you could still test if there is “room” outside for the arrows or not.

你可以用很多魔法数字来做到这一点，特别是在主内容区域的大小上。但如果你不需要知道那会不会很酷？就像主内容区域可以是任何东西，流动/响应式/灵活的，你仍然可以测试箭头外面是否有“空间”。

I was playing with this trick because I remember Adam Argyle talking about it one time, but couldn’t find where he used it. So I wrote this article up to re-learn and document it. Then of course I find the original article. So full credit to Adam here. Mine approach here is super similar of course. I think I prefer how his @container query uses cqi units inside of it in case the parent isn’t the viewport. Clever.

我在玩这个技巧，因为我记得 Adam Argyle 曾经谈论过它，但找不到他使用它的地方。所以我写了这篇文章来重新学习和记录它。然后当然我找到了原始文章。 所以在这里完全归功于 Adam。我的方法当然非常相似。我想我更喜欢他的@container 查询在里面使用cqi 单位，以防父级不是视口。聪明。

The trick is in combining viewport units within a container query. You could probably do it by using container units within a media query too, but we’ll go with the former because I tried it and it worked.

诀窍在于在容器查询中结合视口单位。你可能也可以通过在媒体查询中使用容器单位来做到这一点，但我们将采用前者，因为我试过并且有效。

We’re going to need a “wrapper” element because that’s just how @container queries tend to be most useful. You can’t query the same element that is the container, so easier if the container is a wrapper.

我们需要一个“包装器”元素，因为这就是@container 查询最有用的方式。你不能查询同一个作为容器的元素，所以如果容器是一个包装器会更简单。

<div class="box"> <div class="box-inner"> <div class="arrow arrow-left"> <svg ...></svg> </div> <div class="arrow arrow-right"> <svg ...></...