Flexbox showing dynamic number of items with 5 items per row using flex basis to consume extra space

Question

I want to show 5 items per row using flexbox.

.parent-wrapper {
  height: 100%;
  width: 181px;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex: 1 1 calc(100% * (1/5) - 10px - 1px);
  height: 100px;
}

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

I want to use the flex grow, so that resize will not affect the data displayed. This code above will stretch the data if the row less than 5 items. If i didnt use the flex grow, it works fine for the view, but when resizing there will show some blank space after the data displayed.

If without flex grow, how can i consume extra space by just using the flex basis

calc(100% * (1/5) - 10px - 1px)

Possible of duplicate: https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row — jaydeep patel, Aug 06 '18 at 07:51
Related - https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items — Paulie_D, Aug 06 '18 at 10:25

Luca · Answer 1 · 2018-08-06T08:25:45.053

If I understand correctly, it seems that you are looking for the justify-content property. You want to remove space following the items while also preventing them from stretching. By setting justify-content: space-between you can achieve the desired effect. It will create an even space between the items but not after or before. I also set flex-grow: 0 0 as I assume you don't want your items to grow or shrink.

Here is a link to w3schools listing all possible values for justify-content if space-between is not the layout you need. For example, you also have the option to center your items in order to consume the extra space.

.parent-wrapper {
  height: 100%;
  width: 181px;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
  justify-content: space-between; /* Spaces items evenly between each other */
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex: 0 0 calc(100% * (1/5) - 10px - 1px); /* Setting 0 (none) for flex-grow and 0 for flex shrink */
  height: 100px;
}

<div class="parent-wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

Not really, i want the next row 4 items aligned like the first row 5 items. The last 5th's item will left blank. Without the flex grow = 1, when i resizing my page, it will shows extra space behind. Not fully used of the space. — Crazy, Aug 06 '18 at 08:24

score 0 · Answer 2 · answered Aug 06 '18 at 08:23

I create example for you, can try

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  width: 600px;
  height: 300px;
  border: solid 1px;
  align-items: center; 
}

.item {
  width: 100px;
  height: 70px;
  margin-right: 5px;
  display: inline-block;
  border: solid 1px;  
}

  <div class="container">
    <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 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 class="item"></div>
  </div>
</div

And if you want that items move down if you resize window you must set width and height in percentage for container block — Andriy Yushko, Aug 06 '18 at 08:26
possible to use flex-grow = 1 and maintain the next row data same width as others? — Crazy, Aug 06 '18 at 08:44

Flexbox showing dynamic number of items with 5 items per row using flex basis to consume extra space

2 Answers2