Struggling to master the art of aligning buttons using flex.
On desktop, everything looks perfect:
https://i.sstatic.net/vpdXn.png
Even in portrait mode on mobile:
https://i.sstatic.net/jAAAk.png
But when it comes to landscape view, things get a little messy:
https://i.sstatic.net/iShn3.png
I wish there was a way for them to look more aligned.
Here's the code snippet I'm using for this particular section:
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
}<div>
<div class="row">
<div class="btnWrap col" style="">
<button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Most Common Names</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Newborn Names</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Disappearing Names</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Modern Names</button>
</div>
<div class="btnWrap col" style="">
<button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Common Last Names</button>
</div>
</div>
</div>