-1

I have a flex container like this:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  width: 100%;
}
.item {
  border: 1px solid red;
  flex: 1 1 33%;
  height: 100px;
}
<div class="container">
  <div class="item">#1</div>
  <div class="item">#2</div>
  <div class="item">#3</div>
  <div class="item">#4</div>
  <div class="item">#5</div>
</div>

The container holds more or less divs in a row depending on the size of the screen, so I chose to use the flex shorthand with flex-grow: 1 for smooth size changes.

My problem is that I want #4 and #5 to have the same width as #1, #2 and #3 instead of taking up the whole space.

Peter suib
  • 108
  • 2
  • 10
  • Can you explain what you mean with the "smooth size changes"? Because setting flex-grow to 0 would fix the specific issue presented via the snippet easily. – CBroe Dec 02 '21 at 10:33
  • I mean that there are no hard transition between a width and another width: when I change width with media queries, the gap to the right can become huge before the width change applies – Peter suib Dec 02 '21 at 10:39
  • Can't see how this should be an issue, when you are setting width in percentage? – CBroe Dec 02 '21 at 10:42
  • I may have to to with margin, which I did not put in my example – Peter suib Dec 02 '21 at 10:44
  • Putting the margin in percents did the trick :) – Peter suib Dec 02 '21 at 10:47
  • 1
    Either that, or using `calc(33% - xx)` for the flex item width. – CBroe Dec 02 '21 at 10:48

1 Answers1

0

Set flex grow to 0 and basis to 33.33%

flex: 0 1 33.33%;
zainhassan
  • 1,684
  • 6
  • 12