3

Trying to set-up my flexbox grid as simply as possible.

I want the flex-item to be justify: space-around at all times.

However, once it is time for a flex-item to wrap to the next line, it should 'float left' so it can continue to align to the rest of the elements above.

Can't seem to get the right combination of flexbox properties to do this:

.flex-container{
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-item{
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}

.flex-item:after{
  content:'';
  flex-grow: 1000000000;
}
<div class="flex-container">

  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Pretty standard layout behavior for a grid of products right?

Anyone got an idea how I can achieve this? Maybe I am 'missing something' with how flexbox is meant to be used, but I sadly had to revert to my old floats and clears to get what I wanted for this layout.

dippas
  • 58,591
  • 15
  • 114
  • 126
spacewindow
  • 387
  • 1
  • 3
  • 16

1 Answers1

2

You don't need to justify the content. use margin instead.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  /*optional*/
  margin: auto;
  max-width: 980px
}
.flex-item {
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Update

I want the flex-items to be able to distribute neatly within the flex-container, no matter how wide it is. However, if the the flex-container gets below a width that can contain the flex-items at the minimum spacing allowed = the margin: 1em of each flex-item, they should wrap, floating left and aligning to the flexible grid

You can use the hack provided here by @Michael_B , using ::after won't work 100%, but close to that.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}
.flex-container::after {
  content: '';
  height: 0;
  width: 232px
  /* width + 2x(margin: 1em) */
}
.flex-item {
  flex: 0 0 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

Update #2

Yes saw that one thanks @dippas. Unfortunately this work-around requires manually setting CSS or writing javascript - and I definitely want a pure CSS solution. The flex-items will be generated dynamically, so I can't know what number there are, which is necessary for Michael_B's solution

Then forget flexbox because it can't do what you want, just use inline-block

.flex-item {
  display: inline-block;
  width: 200px;
  height: 200px;
  background: blue;
  margin: 1em;
}
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>
Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126
  • thanks for your response - but this is lacking the functionality of a (a) flexible container, where you do not have a manually set the width with media queries and (b) the flex-items are not automatically spacing horizontally - they are floating left in all rows, without retaining the flexible spacing. I perhaps should have specified that in my question, though it is in my example. – spacewindow Jul 04 '16 at 00:37
  • so what you want exactly? a full screen with divs or you want just a "small" container with the child divs inside? Hard to understand, that's why I stated in a comment that the width was optional – dippas Jul 04 '16 at 00:41
  • Yes I want the flex-items to be able to distribute neatly within the flex-container, no matter how wide it is. However, if the the flex-container gets below a width that can contain the flex-items at the minimum spacing allowed = the margin: 1em of each flex-item, they should wrap, floating left and aligning to the flexible grid. I hope that is clear. – spacewindow Jul 04 '16 at 00:48
  • Yes saw that one thanks @dippas. Unfortunately this work-around requires manually setting CSS or writing javascript - and I definitely want a pure CSS solution. The flex-items will be generated dynamically, so I can't know what number there are, which is necessary for Michael_B's solution. Still seems I'll have to go back to floats/ clears and using child-elements for this functionality. – spacewindow Jul 04 '16 at 01:20
  • what about `inline-block` option? see updated answer, otherwise, media queries, forget floats/clears – dippas Jul 04 '16 at 01:32
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116325/discussion-between-spacewindow-and-dippas). – spacewindow Jul 04 '16 at 01:56