如何使这些子容器在包装时之间的 space 更少？

Question

Here's how my child divs look and I'm trying to make them have less space in between when they wrap

我认为是媒体查询的问题

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  width: 100%;
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  /* added the line above remove if erros */
}

.container-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: red;
  align-items: center;
}

.item {
  margin: 2% 1%;
  width: 95%;
  height: 12%;
  background-color: yellow;
  border: solid black;
  border-radius: 1% 1%;
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  .container-1 img {
    width: 50%;
    height: 100%;
  }
  .container-2 {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .item {
    margin: 2% 1%;
    width: 25%;
    height: 12%;
    background-color: yellow;
    border: solid black;
    border-radius: 1% 1%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/menu.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Menu | Andy's House</title>
</head>

<body>


  <div class="container-2">

    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>




  </div>


  </div>

</body>

</html>

我想减少他们之间的距离 space。如果有人知道怎么做，将不胜感激！ P.S: 如果你看不出来，我就是菜鸟。所以，我很抱歉:(

Answer 1

问题不在于媒体查询。我会将容器高度更改为自动。像这样：

.container-2 {
display: flex;
flex-direction: column;

width: 100%;
height: auto;
background-color: red;
align-items: center;
}

如何使这些子容器在包装时之间的 space 更少？

How can I make these child containers have less space in between when they wrap?

html

css

alignment