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