AI 摘要：本文探讨了如何使用容器查询来动态调整用户界面组件的布局，根据外部空间的可用性决定将分页箭头放置在组件内还是组件外，详细介绍了利用视口单位和容器查询的实现方法。

1. 引言
• 介绍了分页箭头的两种布局方式：外部和内部，取决于外部空间的可用性。
• 提到此方法由 Adam Argyle 提出，并对此方法进行详细探讨。

2. 实现原理
• 讨论了使用视口单位和容器查询的基本原理。
• 强调了容器查询的优势，即无需预设容器的具体尺寸，布局可以根据外部空间的变化动态调整。

3. 代码示例
• 展示了 HTML 结构，包含一个包装元素和内部元素，以及箭头元素。
• 提供了 CSS 代码，定义了容器的宽度使用 min(500px, 100vw)，确保在不同视口大小下的灵活性。
• 介绍了如何使用 @container 查询来检测容器尺寸，并在满足条件时改变内部元素的样式。

4. 具体应用
• 详细解释了如何使用 calc() 函数计算外部空间是否足够放置箭头。
• 展示了使用 translate 属性移动箭头的 CSS 代码。
• 附上了展示效果的视频，证明方法的有效性。

5. 结论
• 强调了这种方法的灵活性，即容器大小可变，而布局仍能正确响应。
• 提及可以使用自定义属性来进一步提高代码的灵活性。

Frontend Masters

Container Query for “is there enough space outside this element?”

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: