My design includes a series of links styled as larger boxes, with varying content and height. Using flexbox to ensure equal heights on each row is straightforward.
I'm utilizing the Bootstrap grid layout, but when the boxes stack vertically (one per row) on smaller screens, I can't achieve consistent heights using flexbox.
I attempted changing flow-direction from row to column, but it did not resolve the issue.
Is there a solution that doesn't involve resorting to JavaScript hacks?
Here are some CSS snippets from the relevant parent container:
display: flex;
flex-direction: row;
flex-flow: row wrap;
And here's how the child link (flex)boxes are styled:
display: flex;
For reference, here's some pseudo code:
<div class="flex-container>
<a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
<h2>Test2</h2>
<div><img src="/ds" alt="Hi" /></div>
<div>sadsafmf sløfmkls</div>
</a>
<a href="/#" class="box col-lg-3 col-md-4 col-sm-6">
<h2>Test3</h2>
<div><img src="/ds" alt="Hi" /></div>
<div>sadsafmf sløfmkls skldfsd ffsf sdflsdf f sl as ad sad</div>
</a>
</div>