How to remove space between two rows of CSS flexbox?

Question

I am using CSS flexbox for my project. I have enabled wrapping in the flexbox. However, a space is appearing between two consecutive rows when items are getting wrapped.

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

Please note that Test is nothing but a flip card of W3 Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card). I have only changed the image and size. The following is screenshot of my page:

Please help me to resolve this.

Questions about CSS should include rendered HTML, not your server-side or template markup. — isherwood, Nov 11 '20 at 21:57
Does this answer your question? [Removing margin from flex items when they wrap](https://stackoverflow.com/questions/46765533/removing-margin-from-flex-items-when-they-wrap) — A. Meshu, Nov 12 '20 at 01:11

score 0 · Answer 1 · answered Nov 11 '20 at 23:59

0

The problem seems to be the height you specified on your parent div (top). Specify only the width. Also on posters I suggest you to specify their width and height to make sure all are in same dimensions example:

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

answered Nov 11 '20 at 23:59

gxvr

296
2
17

Removing height from parent div does remove the space between the rows. Thanks for your help! But I want to know, why is this happening, the logic behind this? – user275494 Nov 12 '20 at 05:06
display: flex on the parent element changes how width and height work. Width and height basically lose the original meaning and will act as a flex-basis. – gxvr Nov 12 '20 at 14:16

score 0 · Answer 2 · answered Dec 09 '20 at 12:59

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

How to remove space between two rows of CSS flexbox?

2 Answers2