Question

我有一个包装纸和一些物品。我想在每一行旁边放两个项目。我使用flexbox来解决这个问题。

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

现在我的问题：有没有办法忽略每一行中第二项的margin-right（它包裹的地方），所以第二项也与左边相同，与左边相同项目是。目前，由于margin-right，行的末尾也存在间隙。我想消除这个差距。纯CSS这可能吗？ last-child只删除最后一项的margin-right，但这很明显。有没有办法在行的末尾删除它，项目包裹在哪里？希望这很清楚。

在我的代码段下面：

＆＃13;

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

＆＃13;

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

＆＃13;

这里还有一个屏幕截图，我想删除右边距（见箭头）：

Answer 1

删除margin-right并使用justify-content: space-between并使用width:calc(50%-18px)。它会为您提供物品之间36px的完全差距。

Stack Snippet

＆＃13;

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

＆＃13;

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

＆＃13;

参考链接

justify-content

Answer 2

如果您可以处理每行可以使用的项目数：nth-child（2n）

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

添加css代码：

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

希望有帮助:)。

Answer 4

使用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; }可选

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 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 属性。

当flex-wrap使用纯CSS

5 个答案: