Flex wrap layout with boxes that "float left" - make the last row boxes same width as the rest

Question

I have a layout with boxes. The count of boxes is dynamic depending on what JSON I retrieve from the server. These boxes need to stack in rows and all the contents inside of the boxes must be fully shown, however the the rows with maximum amount of boxes shoulnd't leave any gaps.

I've achieved this by using flex-wrap: wrap on the parent and flex: 1 on the boxes.

However, if the last row doesn't have as many boxes as the rest of them, they shouldn't strecht all the way to the width of the parent.

As mentioned - the rows with maximum amount of boxes shouldn't leave any gaps and should take up the whole remaining space

Is this even possible? And if it is - how can it be done?

Here is a fiddle showing the problem: https://jsfiddle.net/ymcwnbo2/1/

try with css grid: https://jsfiddle.net/5bqL07ct/ – kukkuz May 08 '19 at 18:39 — kukkuz, May 08 '19 at 18:39

score 0 · Answer 1 · answered May 08 '19 at 17:51

0

Add the following to the container

justify-content: flex-start

and remove flex:1 from the boxes

check this https://jsfiddle.net/ymcwnbo2/

answered May 08 '19 at 17:51

Abhidev

7,063
6
21
26

Yeah, as I've mentioned in my question, this leaves gaps. – GeForce RTX 4090 May 31 '19 at 15:53

Flex wrap layout with boxes that "float left" - make the last row boxes same width as the rest

1 Answers1