Flexbox css unordered list custom styling - css

Question

I want to style my unordered list like this one below
Link to what i want to achive
My structure looks like:
<div class="tabs">
<ul class="tabs__labels">
<li class="0">
<a class="active" href="#">
<img/>
<div>something</div>
</a>
</li>
<li class="1">
<a class="" href="#">
<img/>
<div>something1</div>
</a>
</li>
...
</ul>
</div>
Is it a good idea to name the list classes like 0,1 etc. and style them separately to somehow achive this effect? How to use flexbox to get similar effect? Should i group them into rows?

Answer 1

Would this be a start?
.tabs__labels {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.tabs__labels li {
flex-basis: 45%;
margin: 20px 0;
padding: 0;
}
.tabs__labels li:nth-child(odd) {
display: flex;
justify-content: flex-end;
}
.tabs__labels li:nth-child(even) {
display: flex;
}
.tabs__labels li:nth-child(3),
.tabs__labels li:nth-child(4) {
flex-basis: 35%;
}
.tabs__labels li a {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border-radius: 50%;
border: 1px solid red;
text-decoration: none;
}
.tabs__labels li:nth-child(1)::before {
content: 'some text';
text-decoration: underline;
margin-right: 10px;
}
.tabs__labels li:nth-child(2)::after {
content: 'some text';
text-decoration: underline;
margin-left: 10px;
}
<div class="tabs">
<ul class="tabs__labels">
<li>
<a class="active" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
<li>
<a class="" href="#">S
</a>
</li>
</ul>
</div>