有没有办法可以删除 flex 元素之间创建的边距？

Question

我正在尝试 modify/remove 这个紫边。

此外，有没有一种方法可以使用 css 在特定行中指定我想要的项目数？例如，当 1500px 时，我想要 3 个项目，然后再有 3 个项目，而不是先有 3 个项目，然后再有 3 个项目。

谢谢。

* {
  padding: 0;
  margin: 0;
  font-family: Georgia;
}

.row {
  width: 95%;
  height: auto;
  display: flex;
  margin: 0 auto;
  flex-flow: wrap;
  justify-content: space-around;
}

.items {
  width: 95%;
  margin: 0 auto;
}

.item img {
  vertical-align: top;
  width: 290px;
  height: 400px;
  margin: 2px auto 14px auto;
  box-shadow: 0px 0px 12px rgba(120, 17, 25, .7);
  display: block;
  opacity: 0.95;
}

.item {
  box-shadow: 0px 0px 8px #000;
  margin: 0px auto 30px auto;
  padding: 15px 0;
  width: 330px;
}

@media screen and (max-width:800px) {
  .search form {
    width: 95%;
  }
  .search input {
    width: 100%;
  }
  .search select {
    width: 100%;
    margin-top: 5px;
  }
}

<html>
<body>
  <main>
    <div class="items">
      <div class="row">
        <div class="item">
          <img src="img/1.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
        <div class="item">
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
        <div class="item">
          <img src="img/3.png" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
        <div class="item">
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="item">
          <img src="img/1.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
        <div class="item">
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
        <div class="item">
          <img src="img/1.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
        <div class="item">
          <img src="img/2.jpg" />
          <h2>Lorem Ipsum</h2>
          <h3>1</h3>
          <div class="buy_buttons">
            <button class="b_buy">Comprar</button>
            <button class="b_vista">Vista</button>
          </div>
        </div>
      </div>
    </div>
  </main>

（我删除了不必要的代码）

Answer 1

您可以使用 media-queries 将其存档。我为您写了一个框架供您使用。希望对您有所帮助！？

.w {
  display: flex;
  flex-wrap: wrap;
  gap:2px;
  justify-content: center;
}

.w > div {
  margin-bottom:2px;
  background: gray;
  width: 24%;
}

@media only screen and (max-width: 1500px) {
  .w {
    background-color: lightblue;
  }
  .w > div {
    margin-bottom:2px;
    background: gray;
    width: 33%;
  }  
}

@media only screen and (max-width: 1100px) {
  .w {
    background-color: lightgreen;
  }
  .w > div {
    margin-bottom:2px;
    background: gray;
    width: 49%;
  }  
}

<div class="w">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  
  <div>2</div>
  <div>2</div>
  <div>2</div>
  <div>2</div>
  
  <div>3</div>
  <div>3</div>
  <div>3</div>
  <div>3</div>
  
</div>

Answer 2

紫色部分不是边距，只是 space 由于您的 justify-content 而在项目之间未使用。如果要删除项目之间的 space，只需将属性更改为 justify-content:center。

.row{
    border: 1px solid black;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
}
.item{
  width:33.33%; 
}
.a{
    background-color:blue;
}
.b{
    background-color:red;
}
.c{
    background-color:green;
}
.d{
    background-color:yellow;
}
.e{
    background-color:purple;
}
.f{
    background-color:orange;
}

<div class="row">
    <div class="item a">a</div>
    <div class="item b">b</div>
    <div class="item c">c</div> 
    <div class="item d">d</div> 
    <div class="item e">e</div> 
    <div class="item f">f</div> 
</div>

您还可以选择每行有多少项目，您可以添加新行或为项目设置宽度

有没有办法可以删除 flex 元素之间创建的边距？

Is there a way I can remove the margin created between flex elements?

html

css

frontend