margin-top and flow utility clash
Hey, i'd like to align the buttons to the end of the cards. I have the elements within the cards spaced out with a
flow utility class which uses margin-top. Setting the flow-space on the buttons to auto does what i'd like however removes the space between the paragraph and button on the card holding the most content (and certain cards when the grid items start stacking when the viewport shrinks) due to the way auto behaves and the fact it's overriding the default property in the utility of course. I can't set this on just the first two cards in the example as i'm looking for a more flexible solution as you may not know which card has the most content or how many cards there could be. So from this i have two questions.
1. What sort of workaround/fix could i do here?
2. Why must the container (in this case .card) have to be a flex container for margin-top: auto; to work? If i remove it it stops working.
https://codepen.io/deerCabin/pen/YzbLOvV
Thanks in advance.4 Replies
I am probably missing something here but why don't you use the gap property on the card? As far as I can tell that will give you the same effect without any need to creating an extra utility class.
As for the button at the bottom, an alternative method to force it to the bottom is to give the middle element, in this case the <p> a flex value of 1, that will extend it to the maximum possible space.
https://codepen.io/cbolson/pen/zYQXxXB
Sorry if I have completely miss-understood what it is that you want to do.
that's exactly what i was looking for, thanks a lot man, I never thought about that flex 1 trick. I remember seeing somewhere that
gap shouldn't be used in that way so i attempted not to use it for this sort of thing, i'll have to start utilizing it more here then. Appreciate the help.The reason for gap not always being the best solution is because it may be too uniform. You might want different sized gaps between elements. However your “flow” utility class was setting uniform gaps so it makes no difference in this case.
ah that makes sense, thanks.