CODEWITHSUNDEEP
cssflexbox
Salomon BRYS
Salomon BRYS

Reputation: 9584

CSS flexbox dynamic resizing : prefer max-width

I have a row flexbox container that wraps.
On the items in it, I set:

Here is a simple codepen example.

The problem (as viewable in the example) is the behavior of the resize-wrap.

What happens:
Each item is as small as possible so the maximum number of them is put in the first line, they then grow just as much needed to fill the line. Therefore the item's max-width is almost never reached and the items are much closer to min-width.

What I'm looking for:
Each item is as big as possible so the minimum number of them is put in the first line, they then shrink just as much needed to add a new item and fill the line. Therefore the item's min-width is almost never reached and the items are much closer to max-width.

In other words:
I want the minimum possible number of items per line, not the maximum.

Is there a way to do that in CSS without JS ?

Thanks !

Upvotes: 26

Views: 39487

Answers (1)

Pixel Rubble
Pixel Rubble

Reputation: 1101

I think what you're looking for is flex-basis, justify-content, and align-content.

#container {
  background-color: green;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: stretch;
}

.item {
  flex: 1;
  flex-basis: 200px;
  height: 100px;
  min-width: 100px;
  max-width:200px;
  margin: auto;
  border: solid black 2px;
  background-color: red;
}

If you want the red boxes to fill the entire area, you can take the max width off the div.item.

Upvotes: 16

Related Questions