Closed Flowgram closed 5 years ago
Hi @Flowgram
I found a css solution to help with this; To start add align-items: flex-start
to .container
.
Now on the .card
you need to make sure your flex values are equal to to the column widths that macy would choose. For example, when macy uses 5 columns, set the flex basis to calc(20% - 19.2px)
you will need to do this for all sizes using media queries.
To work out what the value would be, the percentage is 100 / $columns
and the pixel value is ($columns - 1) * $margin / $columns
so if the margin was 24 and it was columns it would be 4 * 24 / 5
.
Let me know if that works.
Thanks, Jerome
@jrmd That's perfect! flex-start
did the trick, thank you so much.
In terms of the column width, thanks for your pointers, I'll have a look into this.
Hi,
I've been using macy.js quite a bit recently and I'm very happy with it.
As the title says, sometimes I'd like to set the parent container to
display: flex
to avoid a massive layout switch once the JS and Macy kick in (or JS fails to load). In some scenarios, this stops Macy from calculating the correct positions for the child elements. If you resize the browser, it recalculates and everything is fine.You can see an example here: https://jsfiddle.net/8vrq2zjf/1/