How to make responsive cards with flexbox
Guys, I'm trying to learn how to make responsive cards with flexbox but I'm struggling a lot, could anyone help me?
9 Replies
My biggest difficulties are how to make them have the same height responsively, how I should select the width of the cards, etc.
Yeah this is a little bit of a tricky issue, even though on the surface it looks simple.
For maintaining same set height, I assume your issue is when they go onto multiple rows, and either you can set a
min-height and so while every row won't necessarily be the same height they'll at least be a certain size.
You can set a height however this doesn't suit every type of content and you then have to deal with the possibility or eventuality of text overflowing (this is generally desired for articles where the text will ... or fade out telling the user there is more and they've just read the start)
For the width using flex-box you can use flex-grow:1; flex-basis:0; and they will take up equal widths.
As for how these should be responsive. They shouldn't wrap (unless you have loads of them and can deal with there potentially being 1 card alone on the last row) and instead when they cannot fit they should be stacked and have the image on the left and text on the right, or any other format which reduces the height.Brother, it worked really well!
@z- ::theProblemSolver:: I was setting a fixed width and wasn't using flex: 1, now I understand how to make them the same size and height. I don't even need to specify a min-height, if I use align-items: stretch in the flex container this will solve the height problem and it will always be occupying the same space regardless of the size of the content.
Sorry I meant same set height. You don't need to use stretch as that's default behavior.
When I said that I meant for when you want a consistent size for instance items in a shop or videos on YouTube, you want all of the cards to either be the same height or not be allowed to squish. This was in response to you talking about height and so I assumed you were having that issue