我有一個N個布爾值的數(shù)組。我想把它們顯示成一條線，如下圖所示，真的是藍色，假的是橙色。

我還想對每個相似值的塊進行分組，這樣我就可以生成一個工具提示，生成的html可能類似于:

<div class="line">
  <div class="group" title="Group 1">
    <div class="item blue">
    <div class="item blue">
    ...
  </div>
  <div class="group" title="Group 2">
    ...
  </div>
  ...
</div>

將有N個div.items，每個都應該是相同的寬度。我還想讓div.line元素反應性地占據(jù)其父元素的整個寬度，并讓組/項與之反應性地放大。

我已經(jīng)使用下面的CSS在沒有div.group的情況下運行了它，但是我不知道如何擴展它來適當?shù)靥幚斫M。

.line {
  width: 100%;
  height: 20px;
  display: flex;
}

.item {
  width: 100%;
  height: 100%;
}

我如何用純CSS來完成這個？

您可以為group類設(shè)置display: contents。這樣，該組就像不存在一樣，因此這些項目將尊重line元素的flex屬性。

.line {
  width: 100%;
  height: 20px;
  display: flex;
}

.item {
  width: 100%;
  height: 100%;
}

.group {
  display: contents;
}