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.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}

img {
width: 100%;
height: auto;
}

.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.container .card {
min-width: 200px;
flex: 25%;

}
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}

img {
width: 100%;
height: auto;
}

.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.container .card {
min-width: 200px;
flex: 25%;

}
20 Replies
ErickO
ErickO3y ago
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 tho
ErickO
ErickO3y ago
flex - 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.
ErickO
ErickO3y ago
this is because flex is a shorthand property
MarkBoots
MarkBoots3y ago
in these scenarios i like to use grid
.container{
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}
.container{
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
}
the cards will wrap and stay within the grid when they get smaller than 200px automatically
ErickO
ErickO3y ago
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 better
MarkBoots
MarkBoots3y ago
yea, it could be done with flex, but that is a hassle
ErickO
ErickO3y ago
I don't love giving "don't do that" answers but I simply don't know how to get it done with flex OMEGALUL
MarkBoots
MarkBoots3y ago
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
MarkBoots
MarkBoots3y ago
like so (it will leave the row gap tho)
MarkBoots
MarkBoots3y ago
MarkBoots
MarkBoots3y ago
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
ErickO
ErickO3y ago
why does grid need a media query
MarkBoots
MarkBoots3y ago
because of the minmax(200px, 1fr). will overflow if there is no space for 200px
ErickO
ErickO3y ago
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.grid {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
MarkBoots
MarkBoots3y ago
ohw wait, that is solvable too yes, just what i wanted too say 🙂 updated the pen
ErickO
ErickO3y ago
😎 👍
MarkBoots
MarkBoots3y ago
so yes, grid is the way to go
ErickO
ErickO3y ago
PepeLaugh indeed
Irfandeva
Irfandeva3y ago
Thank you all for your time, I ditched the flex box and used grid and it worked (thanks @MarkBoots for your suggestion)
Want results from more Discord servers?
Add your server