如何删除两行 CSS flexbox 之间的空间？答案

【问题标题】：How to remove space between two rows of CSS flexbox?如何删除两行 CSS flexbox 之间的空间？
【发布时间】：2021-02-23 21:38:57
【问题描述】：

我在我的项目中使用 CSS flexbox。我已经启用了在 flexbox 中的包装。但是，包裹物品时，连续两行之间会出现一个空格。

HTML

<div className = {styles.top}>
                <Test poster = {"https://image.tmdb.org/t/p/w600_and_h900_bestv2/6Tz1Q69o2n3Zwb0ZffzPL0nFt2T.jpg"} />
                <Test poster = {"https://image.tmdb.org/t/p/w600_and_h900_bestv2/6Tz1Q69o2n3Zwb0ZffzPL0nFt2T.jpg"} />
                <Test poster = {"https://image.tmdb.org/t/p/w600_and_h900_bestv2/6Tz1Q69o2n3Zwb0ZffzPL0nFt2T.jpg"} />
                <Test poster = {"https://image.tmdb.org/t/p/w600_and_h900_bestv2/6Tz1Q69o2n3Zwb0ZffzPL0nFt2T.jpg"} />
                <Test poster = {"https://image.tmdb.org/t/p/w600_and_h900_bestv2/6Tz1Q69o2n3Zwb0ZffzPL0nFt2T.jpg"} />
                <Test poster = {"https://image.tmdb.org/t/p/w600_and_h900_bestv2/6Tz1Q69o2n3Zwb0ZffzPL0nFt2T.jpg"} />
                <Test poster = {"https://image.tmdb.org/t/p/w600_and_h900_bestv2/6Tz1Q69o2n3Zwb0ZffzPL0nFt2T.jpg"} />  
            </div>

CSS

.top{
    background-color:white;
    border: 5px solid black;
    width: 85%;
    height: 85%; 
    position: relative; 
    top: 100px;
    left: 100px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

请注意，Test 只不过是 W3 Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card) 的一张翻牌。我只更改了图像和大小。以下是我的页面截图：

请帮我解决这个问题。

【问题讨论】：

关于 CSS 的问题应该包括呈现的 HTML，而不是您的服务器端或模板标记。
这能回答你的问题吗？ Removing margin from flex items when they wrap

标签： html css reactjs flexbox frontend

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>



<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1> 
      <p>Architect & Engineer</p> 
      <p>We love that guy</p>
    </div>
  </div>
</div>

</body>
</html>

【讨论】：

【解决方案2】：

问题似乎是您在父 div 上指定的高度（顶部）。仅指定宽度。同样在海报上，我建议您指定它们的宽度和高度，以确保所有的尺寸都相同：

  .top img {
  width: 370px;
  height: 370px;
  }

【讨论】：

从父 div 中删除高度确实会删除行之间的空间。谢谢你的帮助！但我想知道，为什么会这样，这背后的逻辑？
display: 父元素上的 flex 改变了宽度和高度的工作方式。 width和height基本失去了原意，将充当flex-basis。