Prevent flex items from occupying leftover width

Question

I have a set of images as tiles with the following css properties: For the parent

.poster-container > div {
                display: flex;
                flex-direction:row;
                flex-wrap: wrap;
            }

and for the flexed items:

.poster-item {
                flex: 1 0 10%;
                margin: 30px;
                height: auto;
                text-align:center;
                overflow: hidden;
                position:relative;
                cursor: pointer;
            }

I have restricted it such that at most 6 tiles can appear in a row. However, when there are less than 6 tiles in the last row, the flexed items stretch out to take equal width each. How can i restrict the tiles from stretching across the whole width so that they are displayed as tiles in the other rows?

score 0 · Answer 1 · answered Dec 13 '18 at 10:19

0

flex: 1 0 10%; this means grow, don't shrink, and have a basis of 10%. See the explanation here and you will also find an example that will fix your problem.

answered Dec 13 '18 at 10:19

Dinca Adrian

1,190
11
21

score 0 · Answer 2 · answered Dec 13 '18 at 10:19

Set flex-grow: 0 in order not to grow, so flex: 0 0 16.666667% (100/6 %)

.wrapper {
  display: flex;
  border: 1px solid black;
}

.wrapper div {
  border: 1px solid blue;
  height: 30px;
  flex: 0 0 100px;
}

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
</div>

Prevent flex items from occupying leftover width

2 Answers2