时间戳

首页 > 解决方案 > 在 css 中选择每行*的第一个子 * 并带有包装的弹性框（第一列？）

css - 在 css 中选择每行*的第一个子 * 并带有包装的弹性框（第一列？）

问题描述

我有一个基本上是“子 div 列表”的 flexbox。盒子的主要特点是自动包装。但是我注意到，由于孩子的包装价值，盒子的左边也有一个偏移量。

我想删除这个。我已经尝试通过给容器一个负填充来做到这一点：但这似乎是不允许的。

然后我试图为“每行的第一个孩子”找到一个选择器，但这也失败了。有没有办法在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>

标签： cssflexboxmargins

解决方案

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

你看，如果你有那个选择器，你就可以实现这个：

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

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

推荐阅读