Flexbox justify wrapped content with same sized elements

Question

I was using CSS-Grid to make a list of elements that had a min-width of 35px and the size would adapt if you resized the window, so that always as many elements as possible could fit into one row, and the gap on the right of the row would always be the same as it was on the left using this CSS:

article{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
  grid-gap: 5px;
}

div{
  height: 35px;
  background-color: lightblue;
}

You can try it here, by rescaling the window. https://jsfiddle.net/k36jy0ou/39/

But due to compability problems I now want to make the same behaviour using flexbox. I don't know flexbox really well, but I got kind of close using this CSS:

article{
  display: flex;
  flex-wrap: wrap;
}

div {
  flex-grow: 1;
  min-width: 35px;
  max-width: 40px;
  background-color: lightblue;
  height: 35px;
  margin: 5px;
}

https://jsfiddle.net/k1tmfu7o/3/

Except, that not all elements have the same size, if you do it like this.

Here is an image to explain my problem

Is there any way to do it using flexbox?

Thank you for your help.

The elements were all aligned atop of eachother, which I could fix if I set -ms-grid-row and -ms-grid-column for each element. But that is just not a really nice solution. — Lumnezia, Sep 04 '18 at 13:00
Already has an answer here https://stackoverflow.com/a/36401995 . — vfle, Sep 04 '18 at 13:18

vfle · Accepted Answer · 2018-09-04T13:14:40.620

Already has an answer here

Working example from the answer above

SASS code

=flex-wrap-fix($flex-basis, $max-viewport-width: 2000px)
  flex-grow: 1
  flex-basis: $flex-basis
  max-width: 100%

  $multiplier: 1
  $current-width: 0px

  @while $current-width < $max-viewport-width
    $current-width: $current-width + $flex-basis
    $multiplier: $multiplier + 1

    @media (min-width: $flex-basis * $multiplier)
      max-width: percentage(1 / $multiplier)

ul
  display: flex
  flex-wrap: wrap

li
  // I want the width to be between the following two sizes
  min-width: 40px
  //max-width: 100px
  // this keeps all the elements the same size
  // **as long as they are on the same row**
  // but I want them to all the same width everywhere
  //flex: 1 0 0

  +flex-wrap-fix(100px)

// demo styles

ul, li
  margin: 0
  padding: 0
  list-style: none

ul
  background-color: tomato

li  
  .content 
    margin: .5em
    background-color: darkgreen

  // the image may have variable width, I want it to take the entire space calculated by flexbox
  img
    width: 100%
    opacity: .5

  figure, img
    margin: 0
    padding: 0

Thanks a lot, that's the bahaviour I was looking for, too bad there is no pure CSS-solution :( But since it's the best I can get, I'll mark it as the answer to my question. — Lumnezia, Sep 04 '18 at 13:21

score 0 · Answer 2 · answered Sep 04 '18 at 12:42

0

Remove

flex-grow:1;

and they will be the same size!

answered Sep 04 '18 at 12:42

Moose

323
1
13

1

Yes that is true, but they will no longer resacle to fill the whole row. You can see it, if you look at the gap on the right when resizing. – Lumnezia Sep 04 '18 at 12:45
... im confused, without the grow:1 it works and looks the exact same as the first example you posted as a fiddle that works how you want ..... – Moose Sep 04 '18 at 12:50
unless the first fiddle ISNT working how you want, but if thats the case you will need to edit your answer as that really isnt clear! – Moose Sep 04 '18 at 12:51
It's hard to explain, maybe if you look at the Image I'll put into my question. – Lumnezia Sep 04 '18 at 12:57
1

It doesn't work as with the grid, the behavior when wrapping isn't the same. – VXp Sep 04 '18 at 12:57
1

Pretty much nothing you can do about it, items on following lines won't and can't just match their widths with the ones above, sticking with the grid is the best you can do, no need to put it aside. @Juggernaut – VXp Sep 04 '18 at 13:04
Thank you for you help. Sadly I don't seem to be able to use grid in IE 10 or 11, since all elements are placed atop of eachother. I can fix this by stting -ms-grid-row and -ms-grid-column for all items, but then it's no longer dynamic and will not break the lines. – Lumnezia Sep 04 '18 at 13:09
1

Np, personally I wouldn't bother about IE and its support, don't be a part of the long lasting problem, IE users don't really matter and are in minority, they are the ones who should adapt. Grid is the future, use it. @Juggernaut – VXp Sep 04 '18 at 13:14
1

I'd stomp IE in a bin faster than you could tell me that it sucks, but sadly my boss sees things a little different. @VXp – Lumnezia Sep 04 '18 at 13:17
1

Glad to hear that, ah...nothing new than... @Juggernaut Well you got the SASS solution which I was waiting for, can't get any further than that. – VXp Sep 04 '18 at 13:19

score 0 · Answer 3 · answered Sep 04 '18 at 13:09

0

I don't know it is what you want or not, just add the attribute on the class article:

justify-content: space-around;

or

justify-content: space-between;

The gap will disappear.

answered Sep 04 '18 at 13:09

Tony Bui

1,231
7
18

This makes the gap on both sides the same size but it won't be the same on all rows. – Lumnezia Sep 04 '18 at 13:11

Flexbox justify wrapped content with same sized elements

3 Answers3