The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Flexbox: same height + aligned to bottom Reply To: Flexbox: same height + aligned to bottom


Thanks @Paulie_D, that’s great!

I have another layout (product index), where I’m trying to make all the items an equal height with flexbox. I’m pretty much there but the image within is getting squashed rather than keeping it’s aspect ratio, have you encountered this before?

The markup would be:

<ul class="products">
<li class="h-product">
<a class="inner">
<img src="" class="u-photo" />
<h2 class="p-name">Name of item</h2>
<p class="e-description">Serves 4-5 people</p>
<span class="p-rating" value="4">Rating: 4 out of 5</span>
<p class="value"><del>£7.99</del> <data class="p-price" value="6.95">£6.95</data></p>

The background colour/image is set on the anchor, due to the complexity of the design it has to be that way. So the anchor needs to stretch the height of the list-item as well. I’ll bang it in a CodePen when I get a moment if needed.

Thanks again!