如何仅在flexbox未换行时为元素B设置背景色？

我有一个启用了wrap属性的flexbox，配置了不同的flex-basis和flex-grow约束。默认状态下显示为：

[ A, B ]

但在特定屏幕尺寸下会换行显示为：

[ A,
  B ]

这正是我想要的效果。我的问题是：能否仅在未换行的情况下为元素B设置背景色？即当它与A处于同一行时，设置与A互补色调的背景色；换行时背景色设为白色。请问该需求是否可行？还是必须使用媒体查询？

完全可行，不需要依赖媒体查询，以下是两种可靠的实现方案：

方案1：CSS容器查询（推荐） #

这是最精准且易维护的方案，基于flex容器的实际宽度判断是否换行，而非硬编码视口断点：

1. 给flex容器开启容器查询上下文：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 自定义你的元素间距 */
  container-type: inline-size; /* 基于内联宽度开启容器查询 */
}

2. 用CSS变量统一管理flex参数，再通过容器查询设置B的背景色：

/* 定义全局变量，方便统一修改 */
:root {
  --a-basis: 300px;
  --a-grow: 1;
  --b-basis: 200px;
  --b-grow: 0;
  --flex-gap: 1rem;
}

.item-a {
  flex: var(--a-grow) 0 var(--a-basis);
  /* A的其他样式 */
}

/* 默认状态（换行时）B背景为白色 */
.item-b {
  flex: var(--b-grow) 0 var(--b-basis);
  background-color: white;
}

/* 当容器宽度足够容纳A+B的基础宽度+间距时（未换行），设置互补背景色 */
@container (min-width: calc(var(--a-basis) + var(--b-basis) + var(--flex-gap))) {
  .item-b {
    background-color: #your-complementary-color; /* 替换成你的互补色 */
  }
}

当flex容器的宽度大于A和B的基础宽度总和加间距时，两个元素会保持同行，此时容器查询触发，给B设置目标背景色；一旦容器宽度不足导致换行，B会自动恢复白色背景。

方案2：利用:has()伪类（兼容性稍弱） #

如果你的元素高度固定，可以通过检测flex容器的高度是否等于单个元素高度来判断换行状态：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.item-a, .item-b {
  height: 4rem; /* 固定元素高度 */
}

.item-b {
  background-color: white; /* 默认换行时的背景色 */
}

/* 当容器高度等于单个元素高度时（说明未换行），给B设置互补色 */
.flex-container:has(.item-b:nth-child(2):first-of-type) {
  .item-b {
    background-color: #your-complementary-color;
  }
}

这个方法依赖元素高度固定，且:has()伪类的兼容性略低于容器查询，适合特定场景下使用。

总结 #

优先选择容器查询方案，它比媒体查询更精准，能适配flex容器嵌套在任意宽度父元素中的场景；如果需要兼容较旧的浏览器，再考虑用媒体查询作为降级方案。

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