Css Alignment Issue Angular Flexbox - css

Question

I have a following HTML with Angular FlexLayout in it
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-between">
<span >
3123131
</span>
<span >
1231231
</span>
<span >
6568
</span>
<span >
989
</span>
</div>
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<div class=" line first"></div>
<div class=" line red"></div>
<div class=" line first"></div>
<div class=" line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" fxLayoutGap="20px"
style="border: 1px solid #eee; border-left: none; border-right: none; margin-left: 10px; padding: 10px;">
<span class=" large" style="text-align: left;">
12<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
68<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: left;">
45<span class="small" style="vertical-align: top;">%</span></span>
<span class=" large" style="text-align: right;">
35<span class="small" style="vertical-align: top;">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
<i class="icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class=" " style="text-align: right;">
684
</span>
<span class=" ">
3514
</span>
<span class=" ">
21
</span>
<span class=" ">
354
</span>
</div>
</div>
The output of this is as below,
But I want them to be evenly aligned in the same straight line, I can't figure out what mistake I'm making in this
Stackblitz

Answer 1

To make horizontal alignment easier, you can define each item as having no width and a centered content. That can be achieved with an inline-flex container:
.centered {
display: inline-flex;
justify-content: center;
width: 0px;
}
After setting the centered class on the items to align, make sure that you use the same spacing on all lines (either space-around or space-between). This stackblitz shows what it looks like when space-around is used:
<div fxLayout="column">
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">3123131</span>
<span class="centered">1231231</span>
<span class="centered">6568</span>
<span class="centered">989</span>
</div>
<div fxLayout fxLayoutAlign="space-around">
<div class="centered line first"></div>
<div class="centered line red"></div>
<div class="centered line first"></div>
<div class="centered line red"></div>
</div>
</div>
<div fxLayout fxLayoutAlign="space-around" class="percentContainer">
<span class="centered large">12<span class="percent">%</span></span>
<span class="centered large">68<span class="percent">%</span></span>
<span class="centered large">45<span class="percent">%</span></span>
<span class="centered large">35<span class="percent">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout fxLayoutAlign="space-around">
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
<i class="centered icon thick"></i>
</div>
<div fxLayout fxLayoutAlign="space-around">
<span class="centered">684</span>
<span class="centered">3514</span>
<span class="centered">21</span>
<span class="centered">354</span>
</div>
</div>