Flexbox css 无序列表自定义样式

Question

我想像下面这样设置我的无序列表
Link to what i want to achive
我的结构如下：

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