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

【问题标题】：Remove margin-right when flex-wrap is wraping elements with pure CSS当 flex-wrap 用纯 CSS 包裹元素时移除 margin-right
【发布时间】：2021-07-22 06:19:24
【问题描述】：

我有一个包装纸和里面的一些物品。我想在每一行中将两个项目相邻放置。我用flexbox 解决了这个问题。

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

现在我的问题：有没有办法忽略每行中第二个项目上的margin-right（它包装的地方），所以第二个项目也与左边的项目一样与包装器的右侧对齐.目前，由于margin-right，行尾也有一个空白。我想消除这个差距。纯CSS 可以吗？ last-child 只是删除了最后一项上的margin-right，但这很清楚原因。有没有办法在项目包装的行尾删除它？希望这足够清楚。

在我的 sn-p 下方：

.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>

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

【问题讨论】：

有很多方法可以解决这个问题，但是有一个问题，如果只有 1 个项目，例如最后一行？ ...如果，它应该居中，拉伸，左对齐，...？
@LGSon 这是一个很好的问题：如果一行中有更多项目，例如三个，它必须再次删除该行最后一个项目的边距。跨度>
知道了。如果每行有 3 个项目，总共有 10 个项目怎么办。那将在最后一行留下一个项目。该项目应该如何表现？ ...与其他尺寸相同或采用全宽，居中或左对齐，...？
@LGSon 与其他大小相同。它应该是这样的：在智能手机上只有一个项目和一个滑块，所以你可以滑过它。平板电脑它们必须连续 2 行 50% 的行。以及 1024px 和更高的 viepowrt 4。所以我可以用 nth-child(2n) 和 nth-child(4n) 轻松解决这个问题，这是使用 medie 查询最简单的方法。 :) 还是谢谢

标签： html css flexbox

【解决方案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>

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

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

添加css代码：

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

希望有帮助:)。

【讨论】：

这是满足我要求的最佳解决方案。谢谢:)

【解决方案2】：

删除margin-right 并使用justify-content: space-between 并使用width:calc(50%-18px)。它将准确地为您提供项目之间 36 像素的间隙。

堆栈片段

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

.wrapper__item {
  width: calc(50% - 18px);
  height: 160px;
  margin: 0 0 20px 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>

参考链接

justify-content

【讨论】：

您好，谢谢。这对我来说不是最好的解决方案，因为我必须在项目之间使用正好 36px 的间隙。有了这个解决方案，它就不是这样了。
@MrBuggy 然后使用width: calc(50% - 18px); 更新！它会给你一个精确的 36px 项目之间的差距。

【解决方案3】：

如果您可以处理每行可以使用多少个项目：nth-child(2n)

【讨论】：

这是一个很好的解决方案。请查看此链接：stackoverflow.com/help/how-to-answer

【解决方案4】：

使用 justify-content: space-between 和 height 的包装器和 align-content 可选

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid black;
  width: 768px;
  height: 588px;
}

.wrapper__item {
  width: 330px;
  height: 160px;
  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>

【讨论】：

两个组件的间距必须是36px。

【解决方案5】：

使用gap css 属性会更简单：

.wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border: 1px solid black;
  width: 600px;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 18px;
}

.wrapper__item { 
  flex: 1;           
  min-width: calc(300px - 18px); 
  height: 160px;     
  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>

它将适用于项目的重要更改：

flex: 1
min-width 而不是 width

在包装上：

gap: 18px 在元素之间创建间隙

您可以使用以下命令在水平和垂直之间创建不同的间隙：gap: HR VR 其中 HR 是水平间隙，VR 是垂直间隙；即：
gap: 10px 18px
或使用column-gap 和/或row-gap 属性。

【讨论】：