Question 381016 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Flex so much space between rows

We have this HTML and CSS code. This contains a container div with different sizes div children.

.cont {
  background-color: red;
  width: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.item1 {
  background-color: orange;
  width: 100px;
  height: 110px;
  margin: 5px;
}

.item2 {
  background-color: pink;
  width: 100px;
  height: 50px;
  margin: 5px;
}
<div class='cont'> 
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
</div>

That will result to:

enter image description here

As you can see, there is a big space or gap between the rows. How can i remove it?

Thanks in advance.

Tags:

2

Answers


  1. 0

    You used align-items when you should have used align-content.

    The CSS align-content property sets the distribution of space between and around content items along a flexbox’s cross axis, or a grid or block-level element’s block axis.

    .cont {
  background-color: red;
  width: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item1 {
  background-color: orange;
  width: 100px;
  height: 110px;
  margin: 5px;
}

.item2 {
  background-color: pink;
  width: 100px;
  height: 50px;
  margin: 5px;
}
    <div class='cont'> 
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item2"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
    <a><div class="item item1"> </div></a>
</div>
    Login or Signup to reply.
  2. 0

    You need to use align-content: flex-start; instead of align-items: flex-start; in .cond styles.

    .cont {
  background-color: red;
  width: 1000px;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search