Flexbox css ungeordnete Liste individuelle Styling

Question

Ich möchte meine ungeordnete Liste wie diese gestalten, unter
Link to what i want to achive
Meine Struktur wie folgt aussieht:

<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> 

Ist es eine gute Idee, die Liste Klassen wie 0 zu nennen , 1 usw. und style sie separat, um diesen Effekt irgendwie zu erreichen? Wie benutzt man flexbox um einen ähnlichen Effekt zu bekommen? Sollte ich sie in Reihen gruppieren?

Answer 1

Wäre das ein Anfang?

.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>