Justify Space Between - incorrect

[Hywel]

I am regularly finding this flexbox behaviour simply doesn’t work; the elements behave like they do on ‘Space Around’ - ie they don’t move to the outside (left and right) of the box.

I have seen a few threads on this but no solutions. Anyone?

[zbrah (Mazette.co)]

Hello,

Flexbox is not totally supported on ie.
Safari also should be but i’m having many issues with it too.
Things like flex in flex most of the time goes crazy on ie and Safari.

[Hywel]

No, I use Chrome. The elements simply don’t move to the outside. In fact the difference between ‘space between’ and space around’ is very small. ‘Space between’ simply doesn’t work.

[zbrah (Mazette.co)]

Hello @Hywel

Hum true and not true I guess you have this issue with a WF container correct ?
Already noticed odd things when flexbox is set on the WF container.

Take a look.

First Option.

I put Flexbox on the WF container, structure like so

It does this

At this point it looks weird because space between should put first div on the start line, last div on the end line

Second option

I put flexbox on a simple DIV with fixed width.

Structure

It does this

This time it works !

So

Third Option

Let’s combine this and put a div in your container with 100% width.
Put Flexbox on this div

Structure

Rolling snare

Works perfectly

My personal advice

Don’t put Flexbox on the WF container, i’m not sure why but it does weird things

[Hywel]

Wow, you could well be right! Thanks for all your hard work.

I have to admit I do make sections and containers into flex boxes - not sure why we should use divs for this, but I’m sure someone very clever would know!

I will revisit my work and see if that applies. Thanks zbrah.

[Brando (Brandon Roche)]

Hey @Hywel

Thanks so much for pointing this out. And thank you @zbrah for helping to find a workaround for this!

We are currently working to find a solution to this and will post here when we have one.

For right now the workaround is as @zbrah suggested:

• Use a div in place of a Container
  OR
• If you do use a Container, place a div inside and put the Flexbox settings on the div

Thanks for your patience with this.