Hi,
Last week we had a question involving a product grid of the type often seen in ecommerce sites where each block needs to be the same height in order to look neat. Previously this was done automatically using table-cells but didn’t allow the cells to wrap at smaller widths unless you changed the cells to floats/inline-blocks with media queries but then you ran into the original equal height issue. This could be partially solved by using a min-height if inline-block was being used but for floats you would need to set an arbitrary height or the floats would snag when wrapped.
All the above methods however did not allow for the footer of each block be fixed to the bottom (remembering that the content could be responsive so you cannot account for space with absolute positioning). The above methods also failed if the height exceeded the height set or in the case of inline block you ended up with unequal boxes again.
These days we can use flexbox to do this all automatically and by adding a couple of simple fallbacks you can still let older browsers get something basic going.
Here’s a basic codepen:
Note that we don’t even need media queries for mobile with this method as it will shrink from 3 columns to two columns and then to one by simply using a min-width on the blocks.
Feel free to use, improve or discuss or point out problems as these are just experiments to test out flexbox now that we can start using it more as support is good in modern browsers.