Can I set wrapped flexbox columns to equal width and stretch their width?

Asked Oct 10 '16 at 13:53

Active Mar 05 '19 at 04:21

Viewed 763 times

I'm making responsive gallery and would like to avoid using media queries while it can be done with flexbox. I set flex-grow to 1, so the columns fill available space and added min/max-width, so they stay in a nice size. The problem is - when columns start to wrap I have:

3 regular columns on first line.
2 bigger columns on the second line.

I would like the second line columns to have the same width as the first one.

jsfiddle demo: https://jsfiddle.net/xu92m43e/1/

Current result:

Expected result

html:

<div class="gallery">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

scss:

.gallery {
  display: flex;
  flex-wrap: wrap;
  border: solid 5px black;
  > * {
    flex-grow: 1;
    background: purple;
    min-width: 175px;
    max-width: 300px;
    margin: 5px;
    &:after {
      display: block;
      content: '';
      padding-bottom: 75%;
    }
  }
}

Solutions without flexbox may be good too, as long as it can wrap the columns.

edited Mar 05 '19 at 04:21

kukkuz

41,512
6
59
95

asked Oct 10 '16 at 13:53

Dariusz Sikorski

4,309
5
27
44

2

Flexbox can't do that natively. It's a common request. – Paulie_D Oct 10 '16 at 13:56
1

One method for solving this problem is with hidden flex items: https://jsfiddle.net/xu92m43e/3/ – Michael Benjamin Oct 10 '16 at 13:58
1

@Michael_B Smells like a dupe to me. :) – Paulie_D Oct 10 '16 at 14:00
@Michael_B hey that's a good idea! Wish i could put a few :after elements on the container to get same result. – Dariusz Sikorski Oct 10 '16 at 14:01
@DariuszSikorski, pseudo-elements can work, as well.. http://stackoverflow.com/q/34928565/3597276 – Michael Benjamin Oct 10 '16 at 14:02
@Michael_B almost... for 1920px view I'd need like 10 of these. – Dariusz Sikorski Oct 10 '16 at 14:03
What's the problem with media queries? – Pete Oct 10 '16 at 14:06
this cannot be solved only with flex! @Paulie_D for ur case, it needs only one another empty div in gallery and all is broken. – Marouen Mhiri Oct 10 '16 at 14:08

Can I set wrapped flexbox columns to equal width and stretch their width?

0 Answers0