0

I have a group of elements, each with a different amount of content. I want to use display: flex and justify-content: space-around on their container to maintain an even amount of space between the elements and still have them fill the browser window horizontally.

The element widths are fixed, but not the height. The number of elements on a row and the amount of space between them should change depending on how much horizontal space the browser window has.

e.g.

|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  1  | |  2  | |  3  |       |
|       |_____| |_____| |_____|       |
|        _____   _____   _____        |
|       |     | |     | |     |       |
|       |  4  | |  5  | |  6  |       |
|       |_____| |_____| |_____|       |
|        _____   _____                |
|       |     | |     |               |
|       |  7  | |  8  |               |
|       |_____| |_____|               |
|                                     |

Floats don't work because items from the next row will float up next to taller elements from the previous row.

This is basically what I've tried, although I now realize that align-content works on the cross axis and isn't what I'm looking for:

div.flexy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: flex-start;
}
div.block {
  flex-basis: 20rem;
}

Demo at CodePen

Is there any way to do this?

halfer
  • 19,824
  • 17
  • 99
  • 186
Vince
  • 3,962
  • 3
  • 33
  • 58
  • Would you be able to include some code? – Aaron Jan 05 '16 at 10:16
  • This has been a great resource for me https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – mimo Jan 05 '16 at 10:18
  • @mimo Yep, that's the article I started at :) – Vince Jan 05 '16 at 10:19
  • Thanks @Aaron. It was just an oversight. I had code ready to put in and the demo at CodePen, but I forgot to put it in. – Vince Jan 05 '16 at 10:23
  • http://codepen.io/anon/pen/ZQebQE like this, or i´m i not understanding your problem? :-) – mimo Jan 05 '16 at 11:25
  • @mimo I don't think you understand my problem. I want to use `justify-content: space-around` to evenly distribute the elements in line with equal space around them. Your example puts the elements right next to each other at the left and leaves a large gap at the right side because the default value for `justify-content` is `flex-start`. – Vince Jan 05 '16 at 11:37
  • I don't think what I want is possible. I found another Stack Overflow question with the same problem: http://stackoverflow.com/q/16377972/2948042 ... My question should probably be marked as a duplicate. – Vince Jan 05 '16 at 11:48
  • I now i understand. Sorry no ideas on how to fix that :-/ – mimo Jan 05 '16 at 11:59
  • You may want to consider invisible spacer items to fill the last line: http://stackoverflow.com/a/34539063/3597276 – Michael Benjamin Jan 05 '16 at 13:18
  • @Michael_B I don't think there's any way to know how many invisible spacer items to add because the number of items in the last row depends on the width of the browser window. – Vince Jan 05 '16 at 21:45

0 Answers0