1

I am using flex-wrap, but it is creating too much vertical spacing between items. Please see image and guide me the solution to remove vertical spacing. enter image description here

    section.genereListContainer{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  //justify-content: center;
}

.bookPackage{
  width: 100px;
  height: 50px;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

<section class="genereListContainer">
<div class="bookPackage" *ngFor="let book of genereList.genres">
  {{book.name}}
</div>

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
raju
  • 6,448
  • 24
  • 80
  • 163
  • That code work properly, so there must be some other CSS doing this? Please sow the parent markup structure up until the body, and their CSS. I get the feeling you gave its parents a height, hence this issue occurs – Asons Dec 25 '16 at 10:07
  • Yes, section.genereListContainer is the parent of .bookPackage having 100% height. Removing height set everything. So cant I give parent height for flex-wrap to work properly. – raju Dec 25 '16 at 10:35
  • As your posted code works, can you post the actually rendered code that create the issue – Asons Dec 25 '16 at 10:41
  • the code I posted was creating issue. removing height:100% fix that. display: flex; -webkit-flex-flow: row wrap; – raju Dec 25 '16 at 10:49
  • Yes, but for me it does not create that issue as it misses the parent structure and its CSS ... and when I know what that is, I can tell why the `height: 100%` on the parent does not work (and likely how to make it work) – Asons Dec 25 '16 at 10:54
  • Give the container `align-content: flex-start`. – Michael Benjamin Dec 25 '16 at 13:11

0 Answers0