Kevin Powell - Community•2y ago

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•2y 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•2y ago

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

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•2y ago

this is because flex is a shorthand property

MarkBoots•2y 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•2y 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•2y ago

yea, it could be done with flex, but that is a hassle

ErickO•2y 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•2y 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•2y ago

like so (it will leave the row gap tho)

MarkBoots•2y ago

here both solutions https://codepen.io/MarkBoots/pen/LYmKLjw?editors=1100

MarkBoots•2y ago

MarkBoots•2y 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•2y ago

why does grid need a media query

MarkBoots•2y ago

because of the minmax(200px, 1fr). will overflow if there is no space for 200px

ErickO•2y 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•2y ago

ohw wait, that is solvable too yes, just what i wanted too say 🙂 updated the pen

ErickO•2y ago

😎 👍

MarkBoots•2y ago

so yes, grid is the way to go

ErickO•2y ago

indeed

Irfandeva•2y ago

Thank you all for your time, I ditched the flex box and used grid and it worked (thanks @MarkBoots for your suggestion)

Gaming

Programming

flexbox