I am facing a challenge with my container where the child elements have col-md-2 and col-lg-3 classes applied dynamically. On larger screens with 3 columns, I want the middle one to be centered and the last one on that row aligned to the end. When there are only 2 columns on a medium screen, the second element of each row should remain aligned to the center. On small screens, all elements should be aligned to the center.
Check out what I have tried so far here
.list-container {
min-height: 100px;
}
.el-row-container {
width: 95%;
}
.el-row-container .el-container {
width: 410px;
margin-bottom: 10px;
padding: 10px;
display: flex;
align-items: center;
}
.data {
position: relative;
min-width: 291px;
height: 36px;
display: inline-block;
padding: 10px 11px;
border-radius: 4px;
font-weight: 400;
letter-spacing: 0.15px;
font-size: 14px;
line-height: 16px;
background: rgba(0, 0, 0, 0.6);
}
@media (min-width: $breakpoint-lg) {
.align-middle {
justify-content: center;
}
.align-end {
justify-content: flex-end;
}
}<div class="container">
<div class="col-xs-12 list-container">
<div class="row el-row-container">
<div class="el-container col-md-2 col-lg-3" ng-repeat="data in els" ng-class="{'align-middle': $index%3 ===1, 'align-end': $index%3 === 2}">
<div class="data">1</div>
</div>
</div>
</div>
</div>I am currently assigning the align-middle and align-end classes based on index values, but I am wondering if there is an easier way to achieve this alignment?