如何用纯CSS实现响应式等宽分组的布尔值展示区块？

核心思路是利用flex布局的比例分配特性，让每个分组根据包含的元素数量占对应宽度，再让分组内的元素平分分组宽度，最终实现所有元素宽度一致、整体自适应父容器的效果。

完整实现代码 #

HTML结构（修正闭合标签并补充分组比例）

<div class="line">
  <div class="group flex-3" title="Group 1: 连续3个true">
    <div class="item blue"></div>
    <div class="item blue"></div>
    <div class="item blue"></div>
  </div>
  <div class="group flex-2" title="Group 2: 连续2个false">
    <div class="item orange"></div>
    <div class="item orange"></div>
  </div>
  <div class="group flex-4" title="Group 3: 连续4个true">
    <div class="item blue"></div>
    <div class="item blue"></div>
    <div class="item blue"></div>
    <div class="item blue"></div>
  </div>
</div>

CSS样式

.line {
  width: 100%;
  height: 20px;
  display: flex;
  gap: 0; /* 若需要分组间的间隙，可调整此值（比如2px） */
}

.group {
  display: flex;
}

/* 按分组内元素数量定义flex比例类 */
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
/* 可根据实际需求扩展更多数量的类 */

.item {
  flex: 1; /* 平分所在分组的宽度 */
  height: 100%;
}

.item.blue {
  background-color: #165DFF; /* 自定义蓝色，可按需调整 */
}

.item.orange {
  background-color: #FF7D00; /* 自定义橙色，可按需调整 */
}

关键逻辑说明 #

1. 分组宽度分配：每个.group的flex值等于其包含的.item数量，这样所有分组会按元素数量比例瓜分.line的总宽度（比如3个元素的分组占3/9，2个元素的占2/9）。
2. 元素宽度统一：.item设置flex:1，会平分所在分组的宽度，最终每个元素的实际宽度为「父容器总宽度 ÷ 所有元素的总数量」，确保所有元素宽度完全一致。
3. 响应式适配：整个布局基于flex比例分配，父容器宽度变化时，所有元素会自动按比例缩放，无需额外媒体查询。
4. tooltip实现：直接通过.group的title属性实现原生hover提示效果，无需额外JS。

内容的提问来源于stack exchange，提问作者I am a Terrible Programmer