如何不依赖类，基于容器尺寸调整Flex布局排列方式？

要实现不依赖example_1/example_2类、仅通过容器上下文控制布局的需求，核心是正确配置CSS容器查询的上下文，并结合通用选择器定位父容器。

问题根源 #

你之前尝试的@container未生效，是因为父容器没有声明container-type属性——浏览器需要明确哪个元素作为容器查询的参考上下文。

实现代码 #

修改后的CSS

/* 定位包含flex-thing的父容器，设置容器查询上下文 */
div:has(.flex-thing) {
  container-type: inline-size; /* 声明以容器的宽度作为查询依据 */
  background-color: yellow;
}

/* 第一个父容器（原example_1） */
div:has(.flex-thing):first-of-type {
  width: 300px;
  height: 30px;
}

/* 第二个父容器（原example_2） */
div:has(.flex-thing):last-of-type {
  width: 150px;
  height: 60px;
}

.flex-thing {
  display: flex;
  flex-direction: row;
  width: max-content;
}

.flex-thing .item {
  background-color: red;
  width: 150px;
  height: 30px;
  border: solid 1px black;
  box-sizing: border-box; /* 避免边框撑宽元素 */
}

/* 容器查询：当父容器宽度≤150px时，切换为块布局 */
@container (max-width: 150px) {
  .flex-thing {
    display: block;
  }
}

修改后的HTML

<div>
  <div class="flex-thing">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

<br>

<div>
  <div class="flex-thing">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

关键说明 #

• container-type: inline-size：告诉浏览器以该容器的宽度作为容器查询的参考维度。
• div:has(.flex-thing)：通过:has()伪类精准定位包含.flex-thing的父容器，无需额外类名。
• 容器查询逻辑：当父容器宽度≤150px时，将.flex-thing的display改为block，让子项堆叠，同时父容器高度足够容纳两个子项，不会露出黄色背景。

内容的提问来源于stack exchange，提问作者MayaGans