在CSS中，选择*每行*的第一个子代*带包装的弹性框（第一列？）

Question

我有一个flexbox，它基本上是一个“子div列表”。包装盒的主要功能是自动包装。但是我注意到，由于儿童的包装价值，包装盒左侧也有一个偏移量。

我希望删除它。我尝试通过给容器添加负填充来做到这一点：但是这似乎是不允许的。

然后，我尝试为“每行的第一个孩子”找到一个选择器，但这也失败了。有没有办法在CSS中做到这一点？

或者，将网格display: grid设置为具有可变宽度的列，并根据内容自动计算列数（因此：自动换行）。

以下示例：

.cont {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  border: solid 1px red;
  padding-left: -16px;
  justify-content: 'center';
}

.cell {
  min-width: 20%;
  border: solid 1px black;
  margin: 8px 16px 8px 0;
}
.wide2 {
  min-width: calc(50% - 2px);
}
.wide {
  width: calc(50% - 16px);
}

<div class="cont">
  <div class="cell wide">
    wide
  </div>
  <div class="cell">
    test
  </div>
  <div class="cell">
    test
  </div>
  <div class="cell">
    test second line, should also have zero margin to left
  </div>
</div>

<div class="cont">
  <div class="cell wide">
    wide
  </div>
  <div class="cell wide2">
    this should line up,<br> iff margin right is no longer there
  </div>
</div>

Answer 1

我相信目前不可能，而且可能永远不会。

您会看到，如果可以拥有该选择器，则可以实现此功能：

.flexbox {
    display: flex;
    flex-wrap: wrap;
}
.flexbox .flex-item {
    margin-left: 200px;
}
.flexbox .flex-item:first-of-flex-line {
    margin-left: 0;
}

请注意，当margin-left: 0中的:first-of-flex-line取消margin-left: 20px规则时，它可能会使下一行的某些项目向上移动，就像无限循环一样。这将需要迭代布局，由于它的渲染成本很高，因此似乎不太可能在浏览器中实现。