フレキシボックスCSS順不同リストのカスタムスタイリング

Question

：

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

は、0のようなリストクラスに名前を付けることをお勧めします、1などと区別してスタイルを変えて、このエフェクトをどうにかしていますか？ flexboxを使って同様の効果を得るには？私はそれらを行にグループ化する必要がありますか？

Answer 1

これはスタートになりますか？

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