当 flex-wrap 用纯 CSS 包裹元素时移除 margin-right

Question

我有一个包装纸和里面的一些物品。我想在每一行中将两个项目并排放置。我曾经flexbox解决过这个问题。

我的包装器具有属性flex-wrap: wrap;，我的物品具有属性：flex: 0 0 45%;。所以我的每个项目都使用了行的 50%（包括边距）。我margin过去常常在项目之间在右侧和底部留出一个间隙。这几乎按我的预期工作。

现在我的问题是：有没有办法忽略margin-right每行中的第二个项目（它包裹的地方），所以第二个项目也与左侧项目相同的包装器右侧对齐。目前，由于margin-right. 我想消除这个差距。这可以用 pureCSS吗？last-child只是删除margin-right最后一项上的 ，但这很清楚原因。有没有办法在行的末尾将其删除，物品包装在哪里？希望这已经足够清楚了。

在我的片段下面：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 768px;
}

.wrapper__item {
  flex: 0 0 45%;
  width: 330px;
  height: 160px;
  margin: 0 36px 18px 0;
  background-color: lightcoral;
}

<div class="wrapper">
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
  <div class="wrapper__item">Item</div>
</div>

这也是我想删除边距的屏幕截图（见箭头）：

Answer 1

  .wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    border: 1px solid black;
    width: 768px;
  }

  .wrapper__item {
    flex: 1 0 45%;
    /*   width: 330px; */
    height: 160px;
    margin: 0 36px 18px 0;
    background-color: lightcoral;
  }

  .wrapper div:nth-child(2n) {
    margin-right: 0;
  }

  <div class="wrapper">
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
    <div class="wrapper__item">Item</div>
</div>

width: 330px;在选择器中删除.wrapper__item。

修改flex: 0 0 45%;为flex: 1 0 45%;in.wrapper__item选择器。

添加CSS代码：

.wrapper div:nth-child(2n) {
    margin-right: 0;
}

希望有帮助:)。