flexbox
I'm using flex box on the container I have my cards inside, I'm setting flex 25% on my card items ,wrap is also enabled , it works fine except the last card which takes the 100% of the available space, please tell me how can I fix it.
20 Replies
you have an inherent flex-grow of 1 which takes all available space
something like
flex: 0 1 25%
should work
don't quote me on that thoflex - CSS: Cascading Style Sheets | MDN
The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.
this is because
flex
is a shorthand propertyin these scenarios i like to use grid
the cards will wrap and stay within the grid when they get smaller than 200px automatically
yeah I was gonna say grid is better here
tested and
flex: 0 1 25%
will mess with how all the cards work and thus the ones at the top might not take all available space as before
so not really a fix, grid would be betteryea, it could be done with flex, but that is a hassle
I don't love giving "don't do that" answers but I simply don't know how to get it done with flex
to make it exact the same size, would not be possible without calculating the size from the cards in the first row. (I... think 😉 )
I think it would be possible to place 4 empty divs at the end of the container without height. they will take up the horizontal space, but if wrapped, no height
like so (it will leave the row gap tho)
here both solutions
https://codepen.io/MarkBoots/pen/LYmKLjw?editors=1100
pro / con
flex: does not need a media query if screen size gets to small / needs empty divs and will leave margin at the bottom
grid: no extra divs, no gap or margin at the bottom / needs a media query when screen gets to small
why does grid need a media query
because of the minmax(200px, 1fr).
will overflow if there is no space for 200px
ohw wait, that is solvable too
yes, just what i wanted too say 🙂
updated the pen
😎 👍
so yes, grid is the way to go
indeed
Thank you all for your time, I ditched the flex box and used grid and it worked (thanks @MarkBoots for your suggestion)